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Abstract 

A system and method of controlling user interface features of a web application is 
provided. The system comprises a collection of user interface control elements, a 
5 collection of skin templates comprising extensible markup language based markup 
contained as children of a container element, a collection of control element scripts for 
performing actions associated with the control elements, and an initialization function for 
directing the processing of one or more control elements in a document object model. 
Each control element comprises a name following a predetermined naming convention, 
10 common attributes for defining graphical features of the control element and for 

associating the control element with the internal state of the core control element, other 
attributes for defining attributes that affect the intrinsic behavior of the control, and a skin 
template reference attribute for referencing a skin template. Each script associated with a 
control element. 



15 



CA 02414378 2002-12-09 



System and Method for Contro lling User Interface Features of a Web Application 

FIELD OF THE INVENTION 

The invention relates to markup languages. In particular, the invention relates to a 
5 system and method for controlling user interface features of web applications. 

BACKGROUND OF THE INVENTION 

Web designers use markup languages to create and modify web sites. Graphical 
User Interfaces (GUI's), also known as user interface (UI) controls, are desirable for 

10 building web applications, as they allow the user to interact with the application in a 
standard, familiar way. UI controls are high-level constructs with data and function 
methods underlying a visual front-end. They behave in standard, expected 
manners-changing their states (e.g., selected, unselected, focussed, disabled, etc.), which 
usually have different appearances, in response to user interaction. For example, clicking 

15 on a push-button will cause the button to go into its down-state in response to the 
'mousedown' event and back into its up-state in response to the 'mouseup* event. 
Another intrinsic behavior of UI controls is that they trigger the execution of 
predetermined actions in response to specified events, such as the user clicking on them 
with the mouse. 

20 Hypertext Markup Language (HTML) is currently the most commonly used 

markup language, or platform, with which to build web applications. HTML is limiting, 
with poor graphics support (only bitmaps, no vectors), its lack of absolute positioning, its 
small set of user interface (UI) controls and its inability to describe the appearance of 
those UI controls (the HTML browser decides on the appearance, and it cannot be 

25 overridden). Scalable vector graphics (SVG) is a language for describing two- 
dimensional graphics in extensible markup language (XML), which may soon become the 
platform of choice with which to build web applications. SVG provides an author with a 
rich set of vector graphics features (as well as bitmaps) and absolute control over their 
positioning. 

30 S VG-based web applications create their own UI controls using SVG to describe 

the visual appearance and script to describe the data and function members, which 
provide the UI controls with the standard intrinsic behaviors discussed previously. This 
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means, however, that non-developers cannot author the UI portion of the content, a fair 
amount of script for the UI controls must be transferred to the client (a significant 
problem for wireless devices) and the UI controls may seem to react sluggishly to user 
input, due to the nature of script being interpreted at run-time as opposed to native code 
5 (e.g. C or C++) being interpreted (and optimized) at compile time. 

XUL is an XML markup language for UI controls created by the Mozilla group, 
specifically for use in their Mozilla HTML web browser. While XUL does offer an 
extensive list of UI controls, offers limited skinnability (control of appearance) and is not 
tied to a forms creation/processing/submission model, XUL is intended for use in HTML 

10 browsers and thus does not allow for absolute positioning nor absolute control of the 
appearance, cannot be easily hooked up to actions and cannot be easily used for forms. 
XUL is not supported in the Adobe (TM) SVG Viewer. 

XForms is another XML markup language which includes UI controls. XForms 
was designed for forms, however. XForms only supports UI controls needed for forms, 

1 5 does not allow for absolute control over their positioning and their appearance, cannot be 
easily hooked up to actions (except those that affect just its own UI controls and its 
"instance", or forms, data) and is very tightly tied to its forms model. XForms is not 
supported in the Adobe SVG Viewer. 

Figure 1 shows a typical web display environment 10 for displaying web pages 

20 and web applications. A web display environment 1 0 comprises a browser 1 1, a viewer 
13, a script interpreter 14, and a DOM 15. The browser 1 1 is the host application, which 
understands and visually renders hypertext markup language (HTML) and/or extensible 
hypertext markup language (XHTML), Examples of browsers include Netscape (TM) 
and Internet Explorer (TM). The browser 1 1 includes a window which is displayed on the 

25 display apparatus, such as a monitor, of an end user computer system. The browser 1 1 
typically employs a plug-in architecture, in which third party software (known as the plug- 
in or viewer 13) can be associated with any file format that is not already natively 
supported by the browser 1 1 and is allowed to render that file within the host browser's 
1 1 window. One type of file that the browser 1 1 may be asked to open is a Scalable 

30 Vector Graphic (SVG) file having a "svg" extension. The browser 1 1 does not natively 
support the SVG markup language (which is an XML language) and so passes the SVG 
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file to the SVG viewer 13, which has associated itself to the SVG file format, via the rules 
of the plug-in architecture of the browser 11. 

The viewer 13 comprises software code for parsing the SVG markup, creating a 
DOM, rendering that DOM to the browser's window, listening for events and dispatching 
5 them to their assigned handler script functions, and interpreting/executing those script 
functions. An example of a viewer 13 is the Corel (TM) SVG Viewer. The viewer 13 
uses the SVG file received from the browser 1 1 to create a DOM 15. The DOM is a 
hierarchical tree structure of objects in memory, representing the hierarchical XML 
markup in the XML text file. The DOM also contains methods (also known as functions 

10 or application programming interfaces (API's)) that allow it to be queried or modified. 
The viewer 13 may also have access to a script interpreter/engine, which can execute 
script code 14 created by a programmer for the purpose of making the document non- 
static (e.g., animation) and/or interactive with the user (e.g., the user can create events 
with the mouse or keyboard, which cause something to happen) via manipulation of the 

15 DOM. 



SUMMARY OF THE INVENTION 

It is an object of the invention to provide a novel system and method of 
controlling user interface features of a web application that obviates or mitigates at least 

20 one of the problems described above. 

In an aspect of the present invention, there is provided a system for controlling 
user interface features of a web application. The system comprises a collection of user 
interface control elements, a collection of skin templates comprising extensible markup 
language based markup contained as children of a container element, a collection of 

25 control element scripts for performing actions associated with the control elements, and 
an initialization function for directing the processing of one or more control elements in a 
document object model. Each control element comprises a name following a 
predetermined naming convention, common attributes for defining graphical features of 
the control element and for associating the control element with the internal state of the 

30 core control element, other attributes for defining attributes that alfect the intrinsic 



-3- 



CA 02414378 2002-12-09 



behavior of the control, and a skin template reference attribute for referencing a skin 
template. Each script associated with a control element. 

In another aspect of the present invention, there is provided a system for 
controlling user interface features of a web application. The system comprises a 
5 collection of control element scripts for performing actions associated with the control 
elements, and an initialization function for directing the processing of one or more control 
elements in a document object model. Each script associated with a control element. 

In another aspect of the present invention, there is provided a method of 
controlling user interface features of a web application. The method comprises the steps 

10 of searching for a designated user interface control element in a document object model, 
and calling a script associated with the designated control element. 

In another aspect of the present invention, there is provided a method of 
controlling user interface features of a web application. The method comprises the steps 
of adding a behavior element as a child of a user interface control element, receiving an 

15 event which is equal to an event attribute setting in the behavior element, and calling a 
script associated with the behavior element. 

In another aspect of the present invention, there is provided a method of creating a 
customizable user interface control element having expected behaviours. The method 
comprises the steps of categorising user interface controls into fundamental core controls, 

20 determining variations of a core controls, determining common attributes of the core 

control, determining fundamental states for the core control, determining how to allow for 
absolute positioning of objects the core control, determining how to allow for absolute 
customization of appearance of the core control, assigning a reference link to the core 
control, determining templates for skins to allow for the absolute customization of 

25 appearance of the core control, determining how to associate behaviors to the core 
control, and creating a core control element. 

In another aspect of the present invention, there is provided computer readable 
media storing the instructions and/or statements for use in the execution in a computer of 
a method of controlling user interface features of a web application. The method 

30 comprises the steps of searching for a designated user interface control element in a 
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document object model, and calling a script associated with the designated control 
element. 

In another aspect of the present invention, there is provided electronic signals for 
use in the execution in a computer of a method of controlling user interface features of a 
5 web application. The method comprises the steps of searching for a designated user 

interface control element in a document object model, and calling a script associated with 
the designated control element. 

In another aspect of the present invention, there is provided a computer program 
product for use in the execution in a computer of a method for controlling user interface 
1 0 features of a web application. The computer program product comprises a collection of 
control element scripts for performing actions associated with the control elements, and 
an initialization function for directing the processing of one or more control elements in a 
document object model. Each script associated with a control element 

15 BRIEF DESCRIPTIONS OF THE DRAWINGS 

Figure 1 shows a typical web display environment for displaying web pages and 
web applications. 

Figure 2 shows a user interface control system, in accordance with an embodiment 
of the present invention. 
20 Figure 3 is a node representation of a document object model of an example of a 

file used in the user interface control system, in accordance with an embodiment of the 
present invention. 

Figures 4A to 4D are screen shots of an example of the display of a user 
interaction with an example of a file used in the user interface control system, in 
25 accordance with an embodiment of the present invention. 

Figure 5 is a flowchart of an example of a method of creating user interface 
controls of a web application at load time, in accordance with an embodiment of the 
present invention. 

Figure 6 is a flowchart of a method of creating user interface controls of a web 
30 application in response to an event, in accordance with the an embodiment of the present 
invention. 
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Figure 7 shows another example of an method of controlling user interface 
features of a web application, in accordance with an embodiment of the present invention. 

Figure 8 shows an example of a method of creating an element for controlling user 
interface features of a web application, in accordance with an embodiment of the present 
5 invention. 

Figure 9 shows an example of a method of creating a plurality of elements for 
controlling user interface features of a web application, in accordance with an 
embodiment of the present invention. 

10 DETAILED DESCRIPTION OF THE PREFERRED EMBODIMENT 

Figure 2 shows a system for controlling user interface features of a web 
application 20 in accordance with an embodiment of the present invention. The user 
interface (UI) control system 20 comprises a collection (or set) of UI control elements 22, 
a collection of UI control skin templates 27, a collection of UI control script 28, and an 

1 5 initialization function 21 . Each UI control element 22 comprises a name 23, common 
attributes 24, other attributes 25, and a skin template reference attribute 26. The name 23 
is what the UI control element 22 is called (e.g., button, combobox, slider, etc.). As these 
UI control elements 22 are not currently part of the scalable vector graphics (SVG) 
specification, their name 23 are prefixed with a namespace (e.g., "dsvg:") so that the 

20 viewer's extensible markup language (XML) parser allows it to be part of the DOM. The 
common attributes 24 are the attributes that are common to every UI control element 22, 
which define the graphical features of the UI control elements 22 (e.g., width="100")> 
define the UI control's label or associated text (e.g., label- *OK") and position, define the 
initial state of the UI control element 22 (e.g., disabled="true") and override the default 

25 appearance of specific states (described in the associated skin) with new appearances 

described elsewhere (e.g., down= tA #skinAlternateDown M ). The other attributes 25 define 
the attributes that are specific to each particular UI control element 22, which affect the 
intrinsic behavior of the UI control (e.g., toggle="true" causes a button control to become 
a "sticky' button, staying down or up after each click). An example of an event occurs 

30 when a user clicks on a UI control element displayed in a window of a browser. The skin 
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template reference attribute 26 provides a reference to the location of the UI control skin 
template 27 which the UI control element 22 may access. 

The UI control skin templates 27 are associated with the UI control elements 22. 
Preferably, there is a one-to-one relationship between UI control elements 22 and UI 
5 control skin templates 27. A UI control skin template 27 is designed to allow for absolute 
customization of appearance of the UI control The skin template 27 is referenced via an 
*xlink:href attribute (or skin template reference attribute) 26 which is a common attribute 
of the UI control elements 22. The skin template 27 comprises SVG markup (which can 
reference bitmap images) contained as children of a 'g' element (a group/container 

10 element), where there is one group per state (e.g. 'up', Mown', 'disabled', etc.). The skin 
templates 27 may be stored as files referenced by the UI control elements 22. Designers 
may modify or replace a skin templates 27 as desired. 

Each UI control's instructions (associated data and function members), which 
define the control's intrinsic behaviors, maybe supplied via script 28 (as opposed to 

15 native code in the viewer being the alternative), which is indirectly associated to the UI 
control element 22 via the initialization function 21. For example, instructions (or 
scripts) 28 may include toggling a button's state between 'up' and 'down' when clicked 
upon with the mouse, or translating (panning) the contents of the document within the 
display window when the thumb of a scrollbar is dragged with the mouse. 

20 The initialization function 21 associates each UI control element 22 to the script 

that creates that particular element-both the visual front-end (as SVG elements in a 
document object model (DOM)) and the back-end (an object in memory, with data and 
function members). The initialization function 21 contains instructions for traversing 
each node in the DOM and for searching and calling functions associated with UI control 

25 elements 22 having names following the predetermined naming convention. 

An alternative UI control system comprises the initialization file 21, the skin 
templates 27 and the scripts 28 of the UI control system 20. The collection of UI control 
elements are provided independently from the alternative DOM manipulation system as 
markup syntax for a designer (or developer, or any user) to use when modifying an XML 

30 file, such as an SVG document. 

The following is an example of a UI control element 22: 
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<dsvg:button 

id='*myRectangularRadioButton'' 
xlink:href^"dsvg/ski^ 
label="Clickme! M 
width="50" 
height="40" 
x="10" 
y="20" 
toggle=="true" 
group- 'myRadioButtons" 
checked="true" 
labelX="0" 
labelY="-3" 

/> 

The 'button' element defines a UI control that can be clicked to trigger an action. The 
'button' element may be a push button, a checkbox (i.e., a sticky/toggle button) or a 
radiobutton, depending on the attributes of the element. 
20 The 'button 9 element contains the name 23: 

dsvg:button 

which follows the naming convention of adding "dsvg:" as a prefix (associated to a 
particular namespace earlier in the file) to the element name, so that the viewer's XML 
parser will allow these non-standard elements in the DOM. As will be described below, 

25 this naming convention will also assist the system 20 to search for UI control elements 22, 
i.e., all UI control elements22 having this prefix in their name 23. The 'button' element 
also contains common attributes 24 (or standard attributes) such as 'id', 'label', V, y , 
'width', 'height, etc. The 'button' element also contains the skin template reference 
attribute 'xlinkrhref which is also common to UI control element 22. The attributes 

30 common to all UI control elements 22 will be described below. 
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The 'toggle' attribute specifies whether the button is a toggle/sticky button or not, 
i.e. whether the button toggles between 'up' and 'down' states when clicked on or instead 
switches to the 'down' state when the mouse button is pressed and then back to the 'up 5 
state when the mouse button is released. The 'group' attribute is the name of the group to 
which the button belongs. If the 'group' attribute is provided, and toggle- true", then this 
results in the functionality of a radiobutton, where selecting any of the radiobuttons 
belonging to that group results in the other radiobuttons in that group becoming 
unselected. The 'checked 5 attribute specifies whether the button is 
down/checked/selected (true) or up/unchecked/unselected (false). The default is set to 
"false". The 'labelX* attribute specifies the x-coordinate of the label relative to the *y* 
attribute. If the 'labelX' attribute is not provided, the label's position is determined by the 
skin 27. The 'labelY' attribute specifies the y-coordinate of the bottom edge of the label, 
relative to the V attribute. If the 'labelY* attribute is not provided, the label's position is 
determined by the skin 27. 

Other example of UI control elements 22 will be described below. 

The following is the syntax for the 'button' skin template 27: 

<?xml version="1.0 n ?> 
<svg> 

<g id="skinButton"> 
<g id="label"> 

<text x-"" y="" style=""> </text> 

</g> 

<g id="up" display="aU"> 
<l%> 

<g id- 'down" display="none"> 
<lg> 

<g id="hit" display="none"> 
</ g > 

<g id="hover" display="none"> 
</g> 
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<g id^'focusUP" display="none"> 
</ g > 

<g id="focusDown" display=**nonc"> 
</ g > 

<g id="disabledUp" display="none"> 
</g> 

<g id="disabledDown" display="none"> 
<lg> 

<Jg> 

</svg> 

As can be seen in the skin template shown above, a separate group is defined for each 
possible state of the UI control, where the specific state is identified via the 'id' attribute. 
The 'display' attributes are not actually required, as the button's associated script sets 
them itself, but by making the 'up' group visible and the other invisible, it allows the 'up* 
state to be easily viewed separately in a viewer, so that the designer can easily get a feel 
for what the button looks like. 

The following is the syntax of an example of a 'button' skin: 

<?xml version="l . 0"?> 
20 <svg> 

<g id="skinButton"> 
<g id« " label "> 

<text x = "50" y="13» 
style= " font - family : 1 Tahoma ' ; stroke : none ; font -si ze : 12 ; text -an 
25 chor: middle "> </text> 

</g> 

<g id="up" display= "all "> 

<rect x="0" y="0" widths" 100" heights" 18" 
style- 11 f ill: rgb( 23 0,23 0,230) / stroke : none" /> 
30 <polyline points= n 0 , 18 0,0 100,0" 

style= " stroke-width : 1 ; stroke : white ; fill : none " / > 

<polyline points*"0, 18 100,18 100,0" 
style= » stroke- width : 1 ; stroke : black; fill : none " / > 

-10- 
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</g> 

<g id= ,, down" display* "none" > 

<rect x="0" y="0" width* "100" height* " 18° 
style* "f ill :rgb (230,230, 230) /stroke : none"/ > 
5 <polyline points*" 0 , 18 0,0 100,0" 

style="stroke-width:l/stroke:black/fill:none"/> 

<polyline points*" 0, 18 100,18 100,0" 
style* "stroke -width : 1 ; stroke : white ; f ill : none "/ > 
</g> 

10 <g id="hover" display* "none" > 

<rect x*"0" y="0" width*" 100" height* "18" 
style="fill:rgb (230 ,230,230) ; stroke : none"/ > 

<polyline points* "0, 18 0,0 100,0" 
style* "stroke -width : 2 ; stroke : white ; f ill mone"/> 
15 <polyline points* "0,18 100,18 100,0" 

style* "stroke -width : 2 ; stroke : black; f ill : none" / > 

<rect x="l" y="l" width*"98" height="16" 
style* "fill: none ; s troke : #19 9DBF" /> 
</g> 

20 <g id="disabled" style* "opacity : 0 . 5" 

display* "none "> 

<rect x*"0" y="0" width*" 100" height* "18" 
style="fill:rgb(230,230, 230) ,-stroke : none" /> 

<polyline points*" 0,18 0,0 100,0" 
25 style* " stroke- width : 1 ; stroke : white ; fill : none" / > 

<polyline points*"0,18 100,18 100,0" 
style* " stroke -width : 1 ; stroke : black /fill: none " / > 

</g> 

</g> 

30 </svg> 

As can be seen in the sample skin file above, the label uses the Tahoma font, with a size 
of 12, and its middle appears 50 units to the right and 13 units below the top-left corner of 
the button, as defined by its V and y attributes. Its states are drawn using light-gray 
rectangles and black and white polylines, and the 'hover' state (which appears when the 
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mouse cursor is overtop of the button) includes an extra light-gray rectangle with a blue 
outline/stroke. 

Other examples of UI control elements 22 will be described below. 
The following is an example of SVG markup used in association with an 
5 embodiment of the UI control system 20. 

<?xml version="1.0"?> 

<iDOCTYPE svg PUBLIC " -//W3C//DTD SVG 20000303 Stylable//EN" 
"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-st 
10 ylable.dtd"> 

<svg xmlns:dsvg= M http://corel .org/dsvg" onload="dsvgInit (evt) " 
width="256" height="256"> 

<script type="text/ecmascript" xlink:href = n dsvg/dSVG. js"/> 
15 <script type="text/ecmascript" xlink:href = n dsvg/BaseUI . js"/> 
<script type="text/ecmascript" xlinkrhref =*"dsvg/button. js"/> 
<script type="text/ecmascript" 
xl ink : href- " dsvg/ constraint . j s " / > 

20 <!-- Create a grey background. --> 

<rect x="0" y="0" width="512 l! height="512" 
style»"fill:rgb(230,230,230) "/> 

<!-- Create various types of buttons, with no associated 
25 behaviours . - - > 

<dsvg:button id="myPushButton" label="Click me!" x="50.5" 
y« H 10 -5" xlink:href = H dsvg/skinButton_Windows ,svg#skinButton ,r /> 

<dsvg:button id="myCheckbox" label="Check me!" x= M 50.5" 
y="50.5" toggle=*"true" 
30 xlink:href ="dsvg/skinCheckbox_Def ault . svg#skinCheckbox"/> 

<dsvg: button id= ,l myRadioButtonl" selected*:" true" label=" Check 
me!" x="50.5" y="100.5" toggle="true n groups "myGroup" 
checked="true" 

xlink:href « M dsvg/skinRadioButton_Def ault . svg#skinRadioButton" /> 
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<dsvg:button id="myRadioButton2" label="No, mei" x= l, 50.5 n 
y= M 125.5" toggle-" true" group= n myGroup" 

xlink:href ="dsvg/skinRadioButton_Def ault .svg#skinRadioButtbn"/> 

<davg:button id= n myBigPushButton" label= M Look how big I am!" 
x="50.5" y= M 150.5" width= M 150" heighten 00" 
xlink : href = " dsvg/skinButton_Windows . svg#skinBut ton n /> 
</svg> 

Figure 3 is a node representation of the DOM of the above button-01 .svg 30. The 
DOM contains a node for the root 'svg' element 31. The DOM representation also 
contains script nodes 32 and a rect (rectangle) node 33 and UI control element nodes 34 
for buttons (button). The <dsvg:button> UI control element 34 contains the prefix 
"dsvgr" in the name 23. 

Figures 4A to 4D are screen shots of the file button-01. svg. Figure 4A is a screen 
shot of the file button-01. svg in its initial state, with the mouse cursor not over any 
buttons. Figure 4B is a screen shot of the display after the user has clicked on the 
checkbox, clicked on the bottom radiobutton, and is now hovering over the top push- 
button. Figure 4C is a screen shot of the display when the user is pressing the mouse 
button down on the top button. Figure 4D is a screen shot of the display when the user 
has let go of the mouse button and moved it away from the UI controls, leaving the top 
button in its 'focus' state (since it is the last-used UI control). Since the skin template 
used by the top button does not have an appearance defined for the 'focus' state, the 
'hover' state's appearance is used instead. 

Figure 5 shows an example of a method of creating UI controls of a web 
application at load time (50) in accordance with the UI control system 20. The 
initialization function 21 is executed/run by the viewer's script interpreter, in response to 
an "onload" event that the viewer generates when it loads an initial file. This can be 
achieved by adding an onload="dsvglnit0" attribute to the root 'svg' element. The 
method (50) begins with the initialization function 21 searching the DOM (beneath the 
root 'svg' element) for a designated UI control element (51). A designated UI control 
element is a UI control element with a predetermined prefix (which is associated to a 
particular namespace using the 'xmlns* attribute of the root 'svg' element) to the name of 
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the name of the UI control element in the DOM. Whether or not the first DOM element is 
a designated UI control element is determined (51). If the first element is a designated UI 
control element (52) (e.g., dsvg:button), then a function name associated with the 
designated UI control element is generated (53) and the function is called (54). If a 
designated UI control element is not found (52), or after a generated function is called 
(54), the method determines if there are more elements in the DOM to search (55). If 
there are more elements in the DOM (55), the initialization function determines if the next 
sibling element is a designated element (56). Steps (52) to (56) are repeated until all 
elements in the DOM are searched. Once there are no more elements in the DOM to 
search (55), then the method is done (57). 

The method described in Figure 5 will be described using the examples of Figures 
2, 3, and 4A to 4D. The viewer's script interpreter will execute the dsvglnitQ function at 
load time (i.e., after the DOM has been built and the scripts retrieved and loaded into 
memory), which will traverse each node in the DOM (56), searching for elements whose 
names 23 begin with the "dsvg:" prefix (i.e., searching for designated UI control elements 
22). The <dsvg:button> node is found. Using a priori knowledge of the naming 
conventions for elements and functions, the string "dsvgButton(element, evt)" is created, 
turned into a function and called. This function finds all of the attributes of the 
'dsvg:button' element, whose corresponding DOM object was passed in as the parameter 
'element', and retrieves their values using the getAttributeO DOM API. It then creates a 
new instance of the button class-creating an object in memory, which contains data and 
function methods that provide the instructions for how to build its visual front-end and 
how to behave in response to events generated by the user. Using the value of the 
'xlinkrhref attribute 26, it retrieves the skin template 27 (which may be in a separate file) 
and uses it to create the visual front-end of the button by creating the SVG elements in the 
DOM, in accordance with the skin template 27, and modifying them using some of the 
other attributes 24, such as 'x', e y\ 'width', 'height', 'label', etc. Other attributes, such as 
'toggle' are used to set up how the button will behave and react to user input, which 
requires that appropriate event listeners be placed (using the addEventListener() DOM 
API) on each group containing the visual appearance of each state, so that the user can 
interact with the button. Once the dsvgButtonO function has completed its instructions, 
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the initialization function 21 then looks for more designated UI control elements 22. It 
finds four more designated UI control elements 22 and handles them in the same manner 
as it handled the first. After that, the initialization function 2 1 does not find any more 
designated UI control elements 22, and so its job is finished. 

When the user positions the mouse pointer over any of the buttons (Figures 4 A to 
4B), the viewer creates an "onmouseover" event, which the event listener hears and 
dispatches to the button class's appropriate handler function. If the button was in an 'up' 
state, this function sets the button's state to be the 'hover' state, causing the visual 
appearance to change to the appearance associated with the 'hover' state. Since only the 
'g' element containing the associated appearance for the 6 up' state has an 'onmouseover' 
event listener, only the 'up' state will respond to that event by putting the button in the 
'hover' state. If the button is in the 'hover' state and the user moves the mouse pointer 
away from the button, the "onmouseout" event is generated and passed to its handler 
function, which changes the button's state back to whatever it was before it was changed 
to the 'hover' state. 

When the user clicks the mouse pointer down over any of the buttons (Figures 4A 
to 4B), the viewer creates an "onmousedown" event, which the event listener hears (if the 
button is not in a 'disabledUp' or 'disabledDown' state, as the appearances associated 
with these states have no "onmousedown" event listeners) and dispatches to the button 
class's appropriate handler function. If the button is a toggle-button (i.e., if its 'toggle' 
attribute equals 'true'), then the "onmousedown" handler function sets the button's state 
to be'down' if it was in the 'up' state (previous to the 'hover' state) or sets it to be 'up' if 
it was in the 'down' state (previous to the 'hover' state), which causes the visual 
appearance to change appropriately. If the button is a radio-button (it's a toggle-button 
but also has a 'group' attribute defined), then the "onmousedown" handler function will 
be called, if the button was in the 'up' state, causing the button to switch to the 'down' 
state, causing its visual appearance to change appropriately and also causing whichever 
button belonging to the same radiogroup that was previously in the 'down' state to switch 
to the 'up' state. If the button is a push-button (i.e., its 'toggle' attribute equals 'false'), 
then the "onmousedown" handler function sets the button's state to be'down' if it was in 
the 'up' state (previous to the 'hover' state). When the user lets go of the mouse button, 
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the viewer generates the "onmouseup" event, whose handler function sets the button back 
to the 'up' state. 

If a toggle-button's state changes from 'up' to 'down' or from 'down' to 'up', or a 
push-button's state changes from *up' to 'down' and then 'up' again, then the 
5 processActionsO handler function is called, which searches all the children of the 'button* 
element, looking for any elements that begin with the "dsvg:" prefix. It does not find any, 
and so its job is done. 

In the example described above, the function was dynamically generated, i.e., a 
string was created, having the same prefix as the designated element (without the colon) 

10 and the same name as the designated element (except with the first letter capitalized) and 
with the designated element's object and the trigger event object passed in as two 
parameters. The skin template 27 and the script 28 or set of instructions for the 
operations of the generated function is stored in a predetermined format either in the 
document text file or in a separate text file on a file system or webserver, and is loaded 

1 5 into memory by the viewer at load time. Alternatively, the initialization function may 
search for elements that begin with the "dsvg:" prefix and, using an 'if or *switch' 
statement, determine the appropriate predetermined function to call, which again are 
expected to have been already loaded in memory by the viewer. 

It is advantageous, though, for the function names to be generated dynamically, so 

20 that the main script file containing the initialization function 21 does not need to be 

updated whenever a new type of UI control element 22 has been created and is available 
for use. 

As well, while the functions 28 that handle each type of UI control element 22 
could be stored all in one file, it is advantageous to store them in separate files and 
25 reference them in the document only if their corresponding UI control element 22 is being 
used, so that only the code that is required is actually transmitted. 

In order for UI control elements 22 to execute desired actions, behavior elements 
may be inserted as children of the UI control elements 22 (the observer elements). The 
behavior element will be executed sequentially for each behavior element whose 'event' 
30 attribute's value matches the observer element's event (e.g., onmouseover, onclick, etc.). 
If the 'event' attribute is not provided, 'onclick' will be assumed. In the example below, 
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clicking on the •Red' button will colour the circle red, while clicking on the 'Blue' button 
will colour the circle blue. 

<button id«"buttonRed M x="10 M y«"10" labeWRed" 
xlink : href =" #skinButton" > 

<setAttribute element ID="myCircle* name="fill w 
value="red w /> 
</button> 

<button id="buttonBlue" x="10" y="40 M label="Red w 
xlink : href =" #skinButton" > 

<setAttribute elementID="myCircle w name="fill w 
valuer" red w /> 
</button> 

<circle id="myCircle tt x="100" y="lO M r="5" 
fill="green"/> 

Alternatively, the behavior elements can (optionally) be grouped as children of an 
<action> element, which can be hooked up to the observer element using a <listener> 
element. For example: 

<button id="buttonRed* x="10" y="10" label="Red n 
xlink : href =" #skinButton" /> 

<button id="buttonBlue" x="10 n y="40« label="Red* 
xl ink : hr e f = " # skinBut t on" / > 

<circle id="myCircle w x="100" y="10" r="5 M 
f ill="green"/> 

<action id="setRed w > 

oetAttribute element ID="myCircle n name="fill« 
value="red u /> 
</action> 
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<action id="setRed tt > 

<setAttribute id="setBlue w elementID==''myCircle n 
name="f ill vv value="blue u /> 
</action> 

5 

<listener event =" onclick" 

observerElementID="buttonRed w handlerID="setRed vv /> 
<listener event =" onclick" 

observerElementID=="buttonBlue w handlerID="setBlue w /> 

10 

Figure 6 shows an example of a method of creating UI controls for a web 
application in response to an event (60) in accordance with the UI control system 20. The 
UI control system 20 is built on top of an event-driven architecture, such as SVG, and 
XML. Once an event occurs on an SVG element (i.e., the observer element), the method 

15 (60) begins with passing the event object to a handler function (61). The handler function 
determines if the first child element of the SVG element associated with the object is a 
designated element (62). If a designated element is found (63), then the handler function 
determines if the event attribute 24 of the designated element is equal to the event that has 
occurred (64). If the event attribute 24 of the designated element is equal to the event 

20 which triggered this method (60), then the name of the function associated with the 

designated element is automatically generated (65) (in accordance with a predetermined 
function naming convention) and called (66). Preferably, the predetermined function 
naming convention is similar to the predetermined element naming convention. If a 
designated element is not found (63), or if the event attribute 24 of the designated element 

25 does not match the trigger event (64), or after a generated function is called (66), the event 
handler determines if there are more child elements of the observer element to search 
(67). If there are more child elements of the observer element (67), the event handler 
determines if the next child is a designated element (68). Steps (63) to (68) are repeated 
until all child elements of the observer element are searched. Once there are no more 

30 child elements to search (67), then the handler function is done (69). 

The initialization file 21 may also search for attributes in elements that are not UI 
control elements 22. Scripts 28 may be created and associated with the *dsvg* attribute in 
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the same manner as with UI control elements. Script functions 28 for 'dsvg' attributes 
only operate on the object associated with the existing element to which a 'dsvg' attribute 
is added. A designer may add the 'dsvg' attribute in an SVG file, or any other XML file 
to be parsed by the viewer 13. 
5 Figure 7 shows another example of an method of controlling UI features of a web 

application (70), in accordance with the UI control system 20. After a user (or designer) 
marks up an SVG file using the markup syntax of the UI control system and the SVG file 
is loaded into a viewer 13, the viewer 13 creates an "onload" event which is received by 
an <svg> element. The method (70) begins with the initialization function 21. A 

10 dsvglnitQ initialization function 21 is called (71) by the viewer's script interpreter, which 
traverses the nodes of the DOM of the SVG file. The initialization function 21 
determines if the first DOM element is a designated element (72). If a designated element 
is found (73) and the 'event' attribute of the designated element is set to "onload" (74), 
then the name of the function associated with the designated element is automatically 

1 5 generated (75) (in accordance with a predetermined function naming convention) and 
called (76). Preferably, the predetermined function naming convention is similar to the 
predetermined element naming convention. If a designated element is not found (73), the 
initialization function 21 determines if the regular SVG element contains any designated 
attributes (77) (which begin with the "dsvg:" prefix). If any designated attributes are 

20 found (77) (e.g., dsvgrtoplTip^WskinTooltip^traditional"), then the names of the 
functions associated with the designated attributes are automatically generated (78) 
(again, in accordance with a predetermined function naming convention) and called (79). 

If a designated attribute is not found (77), then the initialization file 21 determines 
if the regular SVG element has any child elements (80). If the regular SVG element has a 

25 child element (80) and the child element is a designated element 22 (81), then the 

initialization file 21 determines the value of the designated element's 'event' attribute 
(i.e., the event that will trigger the execution of the designated element's associated 
function) and adds that event listener to the parent SVG element (82) (via the 
addEventListenerO DOM API). If the child element is not a designated element 22 (81), 

30 then the initialization file 21 determines if there are any other children of the regular SVG 
element (83). If there are more children (83), then the initialization file searches the next 
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child of the regular SVG element (84). Steps (81) to (84) repeat until there are no more 
children of the regular SVG element. 

If there are no more children of the regular SVG element (83), or after a generated 
function is called (76, 79), or if the event attribute of a designated element is not equal to 
5 "onload" (74), or there are no more child elements in a regular SVG element to search 
(80), the initialization file 21 determines if there are more elements in the DOM to search 
(85). If there are more elements in the DOM (85), the initialization file determines if the 
next sibling element is a designated element (86). Steps (83) to (86) are repeated until all 
elements in the DOM are searched. Once there are no more elements in the DOM to 
10 search (85), then the initialization function 21 is done and the viewer 13 waits for an 
event to occur (87). 

Once an event occurs on an SVG element (i.e., the observer element), that event 
object is passed to any handler function with which it has been associated (88). The 
handler function changes the UI control's state (89) to whatever it should be, according to 

1 5 the logic inherent in the specific UI control, which causes the visual appearance to change 
(the 'g* element containing the SVG for the previous state gets its 'display* attribute set to 
'none', while the 4 g' element containing the SVG for the new state gets its 'display' 
attribute set to 'all'). If the UI control's logic dictates that this change in state requires 
that any associated behavior elements be run (90), then the event object is passed to the 

20 processActionsO handler function (91). The processActionsO handler function traverses 
all children of the UI control element and performs any action required (92). If the UI 
control's logic does not dictate that the change in state requires any associated behavior 
elements to be run (90) or after the processActionsO handler function has performed the 
required actions (92), then the event handler function is done and the viewer waits for 

25 another event to occur (87). 

Referencing Attributes 

To create an application, a designer often desires to reference the current value of 
another element's attributes. The system 20 allows for the following syntax to perform 
30 this reference: 
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%frameID.objectro.doc^ 

If not specified, the 'framelD*, 'object© ' and 'docE)' are assumed to be the current 
frame, object and document. In the following example, checking and unchecking the 
5 checkbox will disable and enable the textbox. 

<button id="myCheckBox w x="10" y="10 ,! toggle^" true" 
label="Disable slider" xlink:href ="#skinCheckbox''> 
<setAttribute elementID="myTextBox u 
10 name=" disabled" value=" %myCheckBox . checked% */> 

</button> 

< text Box id="myTextBox"/> 

1 5 The system 20 also allows for parenthesis and mathematical operators within the % % 
expression. For example, in the markup: 

<dsvg:button id« "button" x="50" y="50" label- "fob" 
toggle= " true " group= "pickPanGroup" 
20 xlink : href = " skinButton_Windows . svg#skinButton" 

selected= M true n /> 

<dsvg:button id= "button^" x= ,, 200" y="200" label= n foo" 
t oggl e = 11 1 rue " group = " p i ckPanGr oup " 
xl ink : href - 11 skinButton_Windows . svg#skinButton n 
25 selected="true" /> 

an attribute 'Too %button_(button@x - 48)@x + 14 * button@y% bar%button@x%" is 
parsed as follows: 

30 Too %button_(button@x - 48)@x + 14 * button@y% bar%button@x/2% t 

-> Too %button_(50 - 48)@x + 14 * button@y% bar%button@x/2%' 
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-> Too %button_(2)@x + 14 * button@y% bar%button@x/2%' 
-> Too %button_2@x + 14 * button@y% bar%button@x/2% , 
-> Too %200 + 14 * 50% bar%button@x/2% , 
-> Too %200 + 700% bar%button@x/2% < 
5 -> Too 900 bar%button@x/2%' 

-> Too 900 bar25' 

Figure 8 shows an example of a method of creating an element for controlling user 
interface features of a web application (200) in accordance with the UI control system 20. 

1 0 The method (200) begins with categorising low level UI controls into abstractions or 
fundamental core UI control groupings (201). Next, common attributes of a core UI 
control grouping are determined (202). Next, other attributes 25 of the core UI control 
grouping are determined (203). Next, a skin template for the core UI control grouping is 
created (204). Next, a core UI control element 22 having the common attributes 24 

15 and26, other attributes 25 is create along with a skin template 27 of the UI control 
grouping (205). The method is done (206). 

Figure 9 shows an example of a method of creating a plurality of elements for 
controlling user interface features of a web application (210) in accordance with the UI 
control system 20. The method (210) begins with organizing low level UI control 

20 elements 22 into groupings of similar UI control elements (211). Next, core UI control 
names are designated to the groupings (212). Next, variations of a grouping are analyzed 
to determine common attributes of the grouping (213). A list of common attributes used 
to describe the variations is compiled (214). Next, fundamental states of the core UI 
control grouping are determined (215). These fundamental states include different 

25 appearances that supply the intrinsic behavior of the core UI control (e.g. a UI control in a 
'disabled* state does nothing when clicked upon). The fundamental states include "up", 
"down", "hover", "hit", "focusUP", "focusDown", "disabledUp" and "disabledDown". 
Once the fundamental states are determined (85), a method of allowing for absolute 
positioning of UI controls is determined (216). For example, providing x and y co- 

30 ordinates. Next, a method of allowing for absolute customization of appearance of the 
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core UI control is determined (217), so that the appearance of the UI controls is in no way 
determined by the viewer or by the script that creates the UI controls. This step (217) 
goes beyond a simple modification of styling properties, which would allow you to 
specify the UI control's fill-colour or stroke-colour, for instance. Instead, the appearance 
5 for each possible state is defined within a skin template, whose location is defined by the 
'xlinkihref attribute, in the same manner in which the 'xlink:href is typically used within 
regular SVG markup (e.g., xliiik:href= <l dsvg/skinButton__Default.svg#skinButton'' means 
that the skin template is an element whose 'id' attribute is "skinButton" within the file 
slrinbuttonJDefault.svg within the dsvg directory). Within the skin template 27, a 'g' 

10 element (group container element) can exist for each possible state, within which any 
SVG markup is allowed (note that if the UI control system 20 is used within an SVG 
viewer, the skin template must contain SVG markup; if the UI control system 10 is used 
within a different viewer, the markup within the skin template must conform to the 
markup that the viewer expects). Thus the UI control's back-end (the script object, with 

15 data and function members) has no pre-conceived notions of what the UI control actually 
looks like for its various states. This poses problems for resizing the UI controls based on 
the 'width' and 'height* attributes, however. It is a simple matter to compare the UI 
control's width and height with the desired width and height, and from that calculate the 
scaling that is required in the x- and y-directions, and then apply those scale factors to the 

20 UI control's visual front-end (a modified version of the skin template) via a 

transformation (in SVG, using the 'transform' attribute). But that causes the UI control to 
not only change dimensions, but it also stretches or squishes all the visual elements and 
changes their absolute positions with respect to one another-the label may be stretched or 
squished and may be further from or closer to the UI control than originally intended, the 

25 stroke-width's may be thicker or thinner, the button in a comboBox, may be stretched, 
etc. The solution is to give the designer the capability of defining the constraints, directly 
in the skin template, that will provide the detailed information needed to "intelligently" 
resize the UI control. For example, one might specify that the label always remain 
unsealed and that its position always be 3 pixels above the UI control, or that the the 

30 stroke-width always be equal to 1 , or that the button of a comboBox always has its width 
automatically adjusted so as to preserve its original aspect ratio. 
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Even if instead of applying the scale factors to the UI control via a transformation, 
the scale factors were instead used to directly modify all of the coordinates for all of the 
various types of elements used for the UI control's appearance (e.g., rect, circle, path, line, 
polyline, etc.), that could still result in some of the same problems. For instance, the 
5 designer might intend for the label's position and/or size to scale or not Thus the 
constraints must still be defined within the skin template. Once all of the above 
determinations have been performed, other attributes 25 that the core UI control element 
needs are determined (218). A core UI control element 22 is then created. A name is 
assigned to a core UI control element 22 pursuant to a naming convention (219). Next the 

10 common attributes 24, of the UI control grouping are assigned to the core UI control 

element 22 (220). The other attributes 25 of the UI control grouping are then assigned to 
the core UI control element 22 (221). Finally, the skin template reference 26 is assigned 
to the core UI control element 22 (222). The skin template 27 comprises descriptions of 
the visual appearance of each state for the UI control. The set of instructions (i.e., the 

15 script) 28 that creates the UI control's back-end (i.e., the object in memory with data and 
function members, which determine how to construct the UI control using the skin 
template 27, what intrinsic behaviors to exhibit and how to interact with the user) are not 
directly associated to the UI control element 22, but rather are indirectly associated to the 
UI control element 22 via the initialization function 21 (i.e., the UI control element 22 

20 does not actually reference the script function 28 or the script file 28 that creates and 
controls the UI control). The core UI control element's 22 set of instructions (script) 28 
may be stored in an independent file. Once all core UI control elements 22 have been 
created (223), the method is done (224). Other steps may be added to the method (210). 
Default settings maybe initiated for the core UI control elements 22, if desired. 

25 There are many advantages to the UI control system 20. The UI control system 20 

encompasses general UI controls desired to build web applications. The UI control 
system 20 allows for absolute positioning, absolute control of the appearance, and may 
easily be hooked up to actions, defined via markup or script functions, that affect any 
element in a DOM. The UI control system 20 may be used for forms. However, the 

30 control system 20 is not tied to a model specifically intended for forms (i.e., does not 
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force the author to jump through hoops to create an application which does not use 
forms). 

The UI control system 20 assists web designers with no programming skills to 
create dynamic, interactive web applications. It also aids experienced programmers to 
5 create dynamic, interactive web applications much more easily and rapidly. Because the 
UI control system 20 involves an XML markup language (as opposed to just script 
functions), the attributes and data and even the elements themselves can be made to be 
data-driven at run-time, using (at design-time) existing or new software that allows one to 
visually map input XML markup to output XML markup, resulting in an extensible 
10 stylesheet language transformation (XSLT) code (or any other language useful for XML 
transformations) which will actually modify the UI control elements 20 based on the input 
XML data/markup. 

The UI control system 20 can also be natively-implemented, accessing the 
exposed DOM API's in the same manner as the script implementation. A native 

15 implementation could be much faster because unlike script, which gets interpreted at run- 
time, native code (e.g. C++ or C) gets interpreted at compile time and gets optimized by 
the compiler. The natively-implemented UI control system 20 could also access any 
unexposed, lower-level object model APFs directly, rather than the exposed higher-level 
DOM APFs, which could further improve performance. If natively implemented, the 

20 amount of data needed to be transferred may be greatly reduced, since there is no script 
that needs to be transmitted, which is especially beneficial for wireless devices with low 
bandwidth and small memory. Using a markup language for the UI control elements 22 is 
also beneficial because it allows for the possibility of further reducing the file size by 
creating a binary version of the markup language that employs opcodes-predetermined 

25 arrangements of bits (l's and 0 ! s) that correspond to particular element names and 
attributes. Unlike textual markup, which must be parsed (compared to predetermine 
strings/text to establish the meaning of the text) in order to create the DOM, binary 
opcodes can be compared to identical binary opcodes, which is much faster than string 
comparisons, in order to build the DOM much faster. 
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The UI control system 20 according to the present invention may be implemented 
by any hardware, software or a combination of hardware and software having the above 
described functions. The software code, either in its entirety or a part thereof, may be 
stored in a computer readable memory. Further, a computer data signal representing the 
5 software code which may be embedded in a carrier wave may be transmitted via a 

communication network. Such a computer readable memory and a computer data signal 
are also within the scope of the present invention, as well as the hardware, software and 
the combination thereof. 

While particular embodiments of the present invention have been shown and 
10 described, changes and modifications may be made to such embodiments without 
departing from the true scope of the invention. 



List of UI Control Elements, Attributes, and Skin Templates 

Some examples of UI control elements 22, common attributes 24 and 26, skin 
15 templates 27 and examples of skins, in accordance with the UI control system 20, are 
provided below. Other UI control elements, attributes and skins may be created. The 
provided UI control elements, attributes and skins are examples of one implementation of 
a DOM manipulation markup language. 



20 Attributes Common to All UI Controls (24 and 26) 

xIink:href= ,, <i/«>" 

A reference to the skin's parent element, stored either internally in the <defs> 
block, or in an external file. (The skin template reference attribute 26). 

id="name" 

25 Standard XML attribute for assigning a unique name to an element. 

l*be\=" string" 

The text associated with the UI control, the position of which is determined by the 
skin, unless overridden by the 'labeDC and labelY* attributes. 
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x="<coordinate>" 

Specifies the x-coordinate of the left edge of the UI control. If not provided, the 
default is zero. 

y=°<coordinate> M 

5 Specifies the y-coordinate of the top edge of the UI control. If not provided, the 

default is zero. 

width="<length>" 

Specifies the width of the UI control. If not provided, the width is determined by 
the skin. 

10 height="<length>" 

Specifies the height of the UI control. If not provided, the height is determined by 
the skin. 

preserve AspectRatio=" (true | false)" 

If 'width 1 or 'height' is given, the other dimension is automatically calculated so as 
1 5 to preserve the UI control's aspect ratio. If both 'width' and Tieight' are given, this 

attribute is ignored. 

labeIX="<coordinate>" 

Specifies the x-coordinate of the left edge of the label, relative to the y attribute. 
If not provided, the label's position is determined by the skin. Note: It is currently 
20 relative to wherever the skin specifies the label to be, but this will be changed, 

labelY="<coordinate>" 

Specifies the y-coordinate of the bottom edge of the label, relative to the 'x' 
attribute. If not provided, the label's position is determined by the skin. Note: It is 
currendy relative to wherever the skin specifies the label to be, but this will be 
25 changed. 

disabled=(true | false) 
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Specifies whether the UI control is disabled (true) and cannot be used, or not 
(false). 

state_hover= lt name H 

Specifies the ID of the UI control's <state> child element, to override the 
5 appearance of the "hover" state, as defined in the skin. 

state_focusjup="name" 

Specifies the ID of the UI control's <state> child element, to override the 
appearance of the "focus_up" state, as defined in the skin. 

state_focus_down=" name" 

10 Specifies the ID of the UI control's <state> child element, to override the 

appearance of the "focus_down" state, as defined in the skin. 

state^p^'name" 

Specifies the ID of the UI control's <state> child element, to override the 
appearance of the "up" state, as defined in the skin. 

1 5 state_down= n name" 

Specifies the ID of the UI control's <state> child element, to override the 
appearance of the "down" state, as defined in the skin. 

state_hit== u name" 

Specifies the ID of the UI control's <state> child element, to override the 
20 appearance of the "hit" state, as defined in the skin. 

state_disabled_jip=" name" 

Specifies the ID of the UI control's <state> child element, to override the 
appearance of the "disabled_up" state, as defined in the skin. 

state_disabled_down= ,T name" 

25 Specifies the ID of the UI control's <state> child element, to override the 

appearance of the "disabled_down" state, as defined in the skin. 
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UI Control Elements 22 

The 'button' element 

The 'button' element defines a control that can be clicked to trigger an action. It 
can be a push button, a checkbox (same as a sticky/toggle button) or a radiobutton, 
depending on its attributes. 

Attribute definitions: 

%standard attributes % 

The standard attributes, such as id, label, etc. 

toggIe="(true | false) 1 ' 

Specifies whether the button is a "toggle" or "sticky" button, meaning that 
it toggles between "up" and "down" states when clicked on. A checkbox 
has toggle- 'true". 

group=" string" 

The name of the group that the button belongs too. If provided, and 
toggle="true", this results in the functionality of a radio button. 

checked="(true | false)" 

Specifies whether the button is down/checked (true) or up/unchecked 
(false). The default is Talse\ 

labelX=' f <coordinate>" 

Specifies the x-coordinate of the left edge of the label, relative to the y 
attribute. If not provided, the label's position is determined by the skin. 

labelY=:"<coordinate>" 

Specifies the y-coordinate of the bottom edge of the label, relative to the 'x' 
attribute. If not provided, the label's position is determined by the skin 

The 'calendar' element 
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The 'calendar' element defines a calendar control, displaying the specified month 
of the specified year. 

Attribute definitions: 

year=" integer" 

Specifies the year for the calendar to display. 
month=" integer" 

Specifies the month for the calendar to display. 
selectable="(all | weekdays | weekends)" 

Specifies what days can be selected by the user. 
multiSeIect="(true | false)" 

Specifies whether the user can select multiple days (true) or not (false). 

The 'comboBox' element 

The 'comboBox' element defines a comboBox control, used to display a list of 
items, from which only one can be selected. It is a combination of a textbox and a 
listbox. There are three types: 

An editable textbox with a drop-down listbox. 

An editable textbox with a fixed-size listbox. 

A non-editable drop-down listbox. 
Attribute definitions: 
%standard attributes% 

The standard attributes, such as id, label, etc. 
dropdown="(true | false)" 

Specifies whether the comboBox has a dropdown list (true). 
editable="(true|felse)" 
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Specifies whether the comboBox is editable (true) or not (false). If 
editable, typing text and pressing Enter results in a new <item> element 
being created as a child of the <comboBox>, with its Value 1 attribute set to 
the text just entered. 

vsdue^" string" 

The value of the currently selected item's 'label' attribute. 

name= T1 string" 

The value of the currently selected item's 'name' attribute, which is not 
displayed. 

selectedro="i7fte£er" 

The value of the currently selected item's 'id' attribute* 

The 'contextMenu' element 

The 'contextMenu' element defines a menu that is associated with a particular 
element or group of elements, which appears at the position of the mouse pointer 
when right-clicking on an element. 

Attribute definitions: 

%standard attributes% 

The standard attributes, such as id, label, etc. 

eventSource^'name" 

Specifies the ID of the element that triggered the contextMenu to appear. 
This attribute gets automatically populated for reference purposes. It 
should never be set via markup. 

valuer" string" 

The value of the currently selected item's 'label' attribute. This represents 
the initial item selected. When a new item is selected, the 'value' attribute 
is automatically updated to reflect the 'label' attribute of the selected item. 
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name=" string" 

The value of the currently selected item's 'name' attribute, which is not 
displayed. 

seIectedID="/«te£er" 

The value of the currently selected item's 6 id' attribute. 

The 'date' element 

The 'date' element defines properties for a particular date for its parent calendar 
control. It must be a child of a 'calendar* element 

Attribute definitions: 

id="name" 

Standard XML attribute for assigning a unique name to an element. 
ytw*"integer" 

Specifies the year for this particular date, 
month- 'integer" 

Specifies the month for this particular date. 
&*y=" integer" 

Specifies the day for this particular date. 
n*me="string" 

Specifies a hidden string to associate with this particular date (which, 
unlike 'id 1 , does not need to be unique), e.g. HOLIDAY" 

selectable="(irue | false)" 

Specifies whether this particular date is selectable (true) or not (false). 

label="s/ri/i£" 

Specifies the text label to be displayed for this particular date. 
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The 'dialog' element 

The 'dialog' element defines a window container, specifically for the purpose of 
collecting data which can be accepted or cancelled. It has inherent Accept/OK, 
Cancel, Help and Info buttons. 

5 Attribute definitions: 

showTitie="(true | false)" 

Specifies whether to display a titlebar (true) or not (false). If true, the title 
is obtained from the Mabel' attribute. 

showMinimizeButton="(true | false)" 

1 0 Specifies whether to display the minimize button or not. 

showMaximizeButton="(true I false)" 

Specifies whether to display the maximize button or not. 
showCIoseButton="(true | false)" 

Specifies whether to display the close button or not. 
15 show AcceptButton="(true | false)" 

Specifies whether to display the Accept/OK button or not. 
showCancelButton="(true | false)" 

Specifies whether to display the Cancel button or not. 
showHelpButton="(true | falser 
20 Specifies whether to display the Help button or not. 

showInfoButton="(true | false) " 

Specifies whether to display the Information button or not. 
modal="(true | false)" 

Specifies whether the window is modal (true) or modeless (false). 
25 movabIe="(tru£ | false)" 
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Specifies whether the window is movable (true) by clicking on the titlebar 
and dragging, or not (false). 

states" (minimized | maximized | normal) " 

Specifies the initial state of the window. If the Minimize or Maximize 
5 buttons are pressed, this attribute is automatically updated. 

The 'frame' element 

The 'frame' element defines a container element. 

1 0 Attribute definitions: 

xlink:href="<i*ri>" 

Specifies the document to display within the 'frame* container. 

The 'item' element 

The 'item' element defines a particular item of a comboBox, listBox, listView, 
contextMenu or menuBar. It can only exist as a child of these elements. 

Attribute definitions: 

id="name M 

Standard XML attribute for assigning a unique name to an element. 

accessKey^'sfrmg" 

The shortcut key which, when pressed, selects this item. Usually the first 
letter of the displayed string. If not unique among the 'item' elements, 
repeated striking of this key will select the next item with that 'accessKey'. 

\*btl="string" 

The displayed text of this item. 

name= f, sfri«£ ,f 



15 



20 



25 
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The hidden text of this item. Optional. 

xlink:href="<*ri>" 

A reference to the parent element of a graphic, stored either interally in the 
<defs> block or in an external file, to be displayed for that item. 

5 anything^" string" 

Any attribute name at all, in which to store data. e.g. 'time 1 , f date\ 'price', 
etc. Used only for the iistView' element. 

The 'HstBox' element 

10 The 'listBox' element defines a listBox control, used to display a list of items, 

from which one or many can be selected. Unlike the 'combpBox' element, it 
cannot be a drop-down list but is instead of a specified size. If all its items cannot 
be displayed within that size, scrollbars automatically appear. 

Attribute definitions: 

1 5 %standard attributes% 

The standard attributes, such as id, label, etc. 
multiSelect="(true | false)" 

Specifies whether more than one item can be selected (true) or not (false). 

editable="(true | false)" 

20 Specifies whether the listbox is editable (true) or not (false). If editable, 

typing text and pressing Enter results in a new <item> element being 
created as a child of the <listbox>, with its Value* attribute set to the text 
just entered. 

valuer" string" 

25 The value of the currently selected item's 'label' attribute. This represents 

the initial item selected. When a new item is selected, the 'value' attribute 
is automatically updated to reflect the 'label' attribute of the selected item. 
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The value of the currently selected item's 'name* attribute, which is not 
displayed. 

selectedID="iwte#?r" 

The value of the currently selected item's 'id* attribute. 

The 'listView' element 

The 4 list View' element defines a listView control, used to display a columnar list 
of items, from which one or many can be selected. Unlike the 'combobox' 
element, it cannot be a drop-down list but is instead of a specified size. If all its 
items cannot be displayed within that size, scrollbars automatically appear. The 
listView control allows for any number of columns-each of which can be visible 
or not, editable or not, and can have its own formatting options, which include all 
of the formatting options available to the 'textBox' element. It also allows for 
column headers, column resizing (by dragging the column separator borders) and 
list sorting (by clicking on the header buttons). 

Attribute definitions: 

%standard attributes % 

The standard attributes, such as id, label, etc. 
multiSelect="(true | false)" 

Specifies whether more than one item can be selected (true) or not (false). 

editable="(true | false)" 

Specifies whether the listbox is editable (true) or not (false). If editable, 
typing text and pressing Enter results in a new <item> element being 
created as a child of the <listbox>, with its Value 1 attribute set to the text 
just entered. 

display="s*n#i£ M 
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A semicolon-delimited list of the names of the attributes in all of the 
listbox's <item> children that is to be actually displayed, in that order. 

anything**" string" 

Any attribute name at all, in which to store data. e.g. toe', 'date*, 'price*, 
etc. These attributes must also appear in the listView's child 'item' 
elements. They represent the initial item selected. When a new item is 
selected, these attributes are automatically updated to reflect the attributes 
of the selected item. 

seIectedID="/#iteg*?r" 

The value of the currently selected item's 'id' attribute, if it has one. 

The 'menuBar' element 

The 'menuBar' element defines a container for menu items. The expected children 
are 'item' elements. 

Attribute definitions: 

%standard attributes 0 /** 

The standard attributes, such as id, label, etc. 

valuer" string" 

The value of the currently selected child 'item' element's 'label' attribute. 
This represents the initial item selected. When a new item is selected, the 
'value' attribute is automatically updated to reflect the 'label' attribute of 
the selected item. 

name^" string" 

The value of the currently selected child 'item' element's 'name' attribute, 
which is not displayed. 
hideGrippy="(true | falser 

Specifies whether to hide the grippy (true) or not (false). 
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The 'menuSeparator' element 

The 'menuSeparator' element defines a separator to be displayed between 'item* 
elements. It can only exist as a child of comboBox, listBox, listView, 
contextMenu or menuBar. 

Attribute definitions: 

id="name" 

Standard XML attribute for assigning a unique name to an element. 

xUnk:href="<wr£>" 

A reference to the parent element of a graphic, stored either interally in the 
<defs> block or in an external file, to be displayed for that item. If not 
provided (which is normally the case), its skin is obtained from the skin of 
the parent UI control. 

The 'messageB ox' element 

The 'messageBox' element defines a simple dialog with a message and a boolean 
response buttons. It can have action elements as children, but any graphical child 
elements will be ignored 

Attribute definitions: 

showTitle= ,f (true | false)" 

Specifies whether to display a titlebar (true) or not (false). If true, the title 
is obtained from the 'label' attribute. 

showYesButton="(true | false)" 

Specifies whether to display the Yes button or not. 
showNoButton=" (true | false)" 

Specifies whether to display the No button or not. 
m vable="(true | false)" 
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Specifies whether the window is movable (true) by clicking on the titlebar 
and dragging, or not (false). 

label="string" 

Specifies the message to display within the message box. 
labelYes="string" 

Specifies the label of the Yes button. The default is "Yes". 
labelNo="string" 

Specifies the label of the No button. The default is "No". 

The 'scrollbar' element 

The 'scrollbar' element defines the vertical and horizontal scrollbars to be 
associated with its parent, usually a document or other UI container element, such 
as a <window> or <frame>. 

Attribute definitions: 

bars- ' (both | horizontal | vertical | none)" 

Specifies whether a horizontal scrollbar (at the bottom), a vertical scrollbar 
(on the right) or both should appear when required. 

The 'slider 5 element 

The 'slider' element defines a slider control, used to select a value from a range of 
allowed values by dragging its 'thumb' control. 

Attribute definitions: 

%standard attributes % 

The standard attributes, such as id, label, etc. 
m\xi=" integer" 

Specifies the minimum value of the slider. 
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max=" integer" 

Specifies the maximum value of the slider. 
minFosition^" integer" 

Specifies the minimum allowed value of the thumb. 
maxPosition=" integer'* 

Specifies the maximum allowed value of the thumb. 
value- 'integer" 

Specifies the initial value of the slider. As the slider's thumb is dragged, 
this attribute is automatically updated. 

increment^" integer" 

Specifies the allowed values that the slider can create, i.e. only 'min' + 
multiples of 'increment' are allowed. 

pagelncrement="i«teg£r" 

Specifies the amount that the thumb should move, in whatever units the 
slider represents (i.e. not in pixels), when clicking to the left or right of it. 
If defined as zero, or not defined at all, the thumb will snap to wherever 
the user clicks. 

orientation="i«teger" 

Specifies the rotation angle of the slider, in degrees clockwise. The default 
is 0 degrees. Note: this will likely be renamed to be 'rotation'. 

ticksMajor=" integer" 

Specifies the interval at which major tick marks (whose appearance is 
defined in the skin) are displayed, in whatever units the slider represents. 

ticksMinor= t, i«/eg r ^r M 

Specifies the interval at which minor tick marks (whose appearance is 
defined in the skin) are displayed, in whatever units the slider represents. 
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The 'spin' element 

The 'spin' element defines a spin control, used to select a value from a range of 
allowed values by pressing the up- or down-buttons, or by entering numbers in its 
textBox component. 

Attribute definitions: 

%standard attributes % 

The standard attributes, such as id, label, etc. 
miw="integer" 

Specifies the minimum value of the spin control. 
m*x="integer" 

Specifies the maximum value of the spin control. 
v&\ue=" integer" 

Specifies the initial value of the spin control 
increment^/Hte^r" 

Specifies the allowed values that the spin control can create, i.e. only 'min' 
+ multiples of 'increment' are allowed. 

The 'state' element 

The 'state' element defines an alternate skin to be available for the parent UI 
control to use to override the appearance of any of its states. It must be a child of a 
UI control element. 

Attribute definitions: 

xlink:href= ,t <uri>" 

A reference to the parent element of a graphic, stored either interally in the 
<defs> block or in an external file, to be available to be used to override 
the appearance of a particular state for the parent UI control. 
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The HextBox' element 

The 'textBox' element defines a text input field, with any number of rows, in 
which the user can enter text. 

Attribute definitions: 

%standard attributes% 

The standard attributes, such as id, label, etc. 

value="sfr/#i£ M 

Specifies the default text within the textbox. Whenever the textbox loses 
focus, this attribute is updated to reflect the current contents of the textbox. 
Modifying this attribute externally, via the <setAttribute> element, should 
result in the contents being updated appropriately. 

numLines=" (integer | autoV 1 

Specifies the number of lines allowed in the textbox. If this number of 
lines cannot be displayed within the textbox, a vertical scrollbar will 
automatically appear when needed. If numlines-'auto", the textbox will 
display as many lines as can fit within it. The default is "auto". 

maxLength- 1 (integer | auto)" 

Specifies the maximum number of characters allowed in the textbox. If 
that many characters cannot fit within the textbox, the text will pan 
horizontally so as to allow text entry. If maxLength="auto", the textbox 
will allow as many characters as can fit within it. The default is "auto". 

wrap =,, (true | false)" 

Specifies whether to auto-wrap text (true) or not (false). If true, text will 
never scroll horizontally but will instead jump to the beginning of the line 
below. 

readOnly="(true | false) " 

Specifies if the textbox is non-editable (true) or editable (false). 
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secret="(true | fake)" 

Specifies whether the text is secret (true) or not (false). If secret, such as a 
password, only asterisks (*) will be displayed, although the real characters 
still exist and get copied to the Value' attribute when the textbox loses 
focus. 

dataType="(any | alphabetic | alphanumeric | numeric | symbolic | date)" 

Specifies the type of data that is allowed to be entered. 
mask-'string" 

Specifies a pattern that allows extra characters to be inserted into the data 
as it is entered and/or only allows specific characters in specific locations. 

case= f, (mixed | upper | upperFirstChar | lower)" 

Specifies whether the data should keep its case as entered (mixed), should 
be set to all uppercase (upper), should have its first character set to 
uppercase (upperFirstChar), or should be set to lowercase( lower). 

The 'toolBar' element 

The 'toolBar* element defines a container for buttons. 
Attribute definitions: 
%standard attributes% 

The standard attributes, such as id, label, etc. 
selectedID="name" 

The value of the currently selected child 'button' element's 'id' attribute. 
hideGrippy="(true | false)" 

Specifies whether to hide the grippy (true) or not (false). 

The 'window* element 
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The 'window' element defines a top-level container element that may be either 
modal or modeless, and may be moveable or not. 

Attribute definitions: 

%standard attributes% 

The standard attributes, such as id, label, etc. 

showTit!e="(true | false)" 

Specifies whether to display a titlebar (true) or not (false). If true, the title 
is obtained from the * label' attribute. 

showMinimizeButton="(true | false)" 

Specifies whether to display the minimize button or not 
showMaximizeButton="(true | false)" 

Specifies whether to display the maximize button or not 
showCloseButton="(true | false)" 

Specifies whether to display the close button or not. 
modal="(true | false)" 

Specifies whether the window is modal (true) or modeless (false). 

movable="(true | false)" 

Specifies whether the window can be moved (true) by clicking on the 
titlebar and dragging, or not (false). 

state= ,f (minimized | maximized | normal) " 

Specifies the initial state of the window. If the Minimize or Maximize 
buttons are pressed, this attribute is automatically updated. 

UI Control Attributes 

The following attributes can be applied to any element, to create a context- 
sensitive UI control, which may be event-triggered. 



-44- 



CA 02414378 2002-12-09 



toolTip="<iw>" 

A reference to the parent element of the tooltip's skin, stored either interally in the 
<defs> block, or in an external file. If provided, this element and all child 
elements containing a 'title* attribute will have a tooltip display when the mouse 
5 cursor is over the element, using the text supplied in the 'title' attribute. 

tipDelay="roteger n 

Specifies the delay, in seconds, between when the mouse first hovers over an 
element and when its tooltip appears. 

tipTrack="(tnie | false)" 

10 Specifies whether the tooltip should follow the mouse (true) or stay in one 

position until the mouse cursor leaves the element (false). 

contextMenu-' string" 

Specifies the 'id' of the <contextMenu> element that should appear when the user 
right-clicks on the element containing this attribute. 

15 nativeContextMenu="string M 

Specifies the 'id' of the <menu> element that should appear when the user right- 
clicks on the element containing this attribute. <menu> is an Adobe-specific 
markup for the Adobe SVG Viewer. Thus this attribute is only for use with the 
Adobe SVGViewer. 

20 

Skin Templates 27 for UI Controls 
The 'button' Skin Template 

<?xml version="L0"?> 
<svg> 

25 <g id="skinButton"> 
<g id="laber> 

<text x= M " y=""style= ,, "> </text> 
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</g> 

<gid="up M display="air> 

</g> 

<g id="down" display="none"> 
</g> 

<g id="hit" display="none"> 
</g> 

<g id="hover" display="none"> 
</g> 

<g id="focusUp" display="none"> 

<jg> 

<g id="focusDown" display="none"> 
<lg> 

<g id="disabled_up" display="none"> 
</g> 

<g id="disabled_down" display="none"> 

</g> 
</g> 

</svg> 

Example 'button' Skin 

<?xmlversion="1.0"?> 
<svg> 
<g id="skinButton"> 
<gid= ,, label"> 



-46- 



CA 02414378 2002-12-09 



<textx="50"y="13" 
style="font-family:Tahoma';stroke:none;font-size: 1 2;text-anchor:middle"> </text> 

</g> 

<g id= ,, up" display="aH"> 

5 <rect x="0" y="0" width="100" height="18" 

style=Till:rgb(230,230,230);stroke:none7> 

<polyline points="0,18 0,0 100,0" style^"stroke-width:l;stroke:white;fill:none"/> 

<polylinepoints="0,18 100,18 100,0" 
style="stxoke-width: 1 ;stroke:black;fill:none"/> 

10 </g> 

<g id="down" display="none"> 

<rect x="0" y="0" width="100" height="18" 
style="fill:rgb(230,230,230);stroke:none"/> 

<polylinepoints="0,18 0,0 100,0" style="stroke-width:l;stroke:black;fill:none"/> 

15 <polyline points="0,18 100,18 100,0" 

style="stroke-width: 1 ;stroke:white;fill:none7> 

</g> 

<g id="hover" display="none"> 

<rect x="0" y="0" width=" 1 00" height=" 1 8" 
20 style="fill:rgb(230,230,230);stroke:none"/> 

<polylinepoints="0,18 0,0 100,0" style="stroke-width:2;stroke:white;fill:none"/> 

<polylinepoints="0,18 100,18 100,0" 
style="stroke-width:2;stroke:black;fill:none"/> 

<rect x="l" y="l" width="98" height="16" style="fill:none;stroke:#199DBF"/> 
25 </g> 

<g id="disabled" style="opacity:0.5" display="none"> 
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<rectx="0" y="0" width="100" height="18" 
style="fill:rgb(230,230,230);stroke:none"/> 

<polylinepoints="0,18 0,0 100,0" style="stroke-width:l;stroke:white;fill:none"/> 

<polylinepoints="0,18 100,18 100,0" 
5 style-'stroke-width: 1 ;stroke:black;fill:none'7> 

</g> 

</g> 

</svg> 



1 0 The 'contextMenu' Skin Template 

<?xml version=" 1 .0"?> 
<svg> 

<g id="skinContextMenu"> 
<g id="skinContextMenu_top" display="all"> 
15 </g> 

<g id- 'skinContextMenu_middle" display="all"> 

<text x="" y="" id="label"> </text> 
</g> 

<g id="skinContextMenu_iniddle_hover" display="none"> 
20 <text x="" y="" id="label"> </text> 

</g> 

<g id="skinContextMenu_middle_selected" display="none"> 

<text x="" y="" id="label"> </text> 
</g> 

25 <g id="skinContextMenu_bottom" display="all"> 



-48- 



CA 02414378 2002-12-09 



</g> 
<g> 

</svg> 

5 Example 'contextMenu' Skin 

<?xml version=" 1 .0"?> 
<svg> 

<g id="skinContextMenu"> 

<g id="skinContextMenu_top" display="all"> 

1 0 <line x 1="0" yl=" 1 7" x2="0" y2="20" style="stroke:#000000;stroke-width: 1 " l> 

<line xl="150" yl="17" x2="150" y2="20" 
style="stroke:#000000;stroke-width: 1 " t> 

<linexl="0" yl="17" x2="150" y2="17" style^-sttoke^OOOOOistroke-width:!" 

l> 

15 <rectx="l" y="18" width="148" height="2" style="fill:#FFFFFF"/> 

</g> 

<g id=*skinContextMenujraiddle" display="all"> 

<line xl="0" yl="20" x2="0" y2="35 ,, style="stroke:#000000;stroke-width:r' t> 

<line xl="150" yl= w 20" x2="150" y2="35" 
20 style="stroke:#000000;stroke-width: 1 " l> 

<rect x="l" y="20" width="148" height="14" 
style="fill:#FFFFFF;stroke:#FFFFFF;stroke-width: 1 " isback="true'7> 

<text x="3" y="32 M id="label"> </text> 

</g> 

25 <g id="skinContextMenu_middle_hover" display="none"> 

<line xl="0" yl="20" x2="0" y2="35" style="stroke:#000000;stroke-width:l" l> 

-49- 



CA 02414378 2002-12-09 



<line xl="150" yl="20" x2="150" y2="35" 
style="stroke:#000000;stroke-\vidth: 1 " l> 

<rect x="l" y="20" width="148" height= M 14" 
sty^-fill^CCCCCCjstroke^FFFFFF^troke-widtli: 1 " isback="true"/> 

5 <text x="3" y="32" id="label"> </text> 

</g> 

<g id- •skinContextMenujiudd^selected" display="none"> 

<line xl="0" yl="20" x2="0" y2="35" style="stroke:#000000;stroke-width:l" l> 

<line xl="150" yl="20" x2="150 n y2="35" 
10 style="stroke:#000000;stroke-width:l"/> 

<rect x="l" y="20 n width="148" height="14" 
style="fill:#FF0000;stroke:#FFFFFF;stroke-width: 1 " isback="true"/> 

<text x="3" y="32" id="label"> </text> 
</g> 

15 <g id='*skinContextMenu_bottom" display="air> 

<line xl="0" yl="35" x2="0" y2="38" style= M stroke:#000000;stroke-width:l" /> 

<line xl="150" yl="35" x2="150" y2="38" 
style="stroke:#000000;stroke-width: 1 " t> 

<line xl="0" yl="38" x2="150" y2="38" style=^troke:#000000;stroke-width:r 

20 l> 

<rect x="l" y="36" width="215" height="2" style= , Till:#FFFFFF"/> 
</ g > 

</g> 
</svg> 

25 

The 'comboBox' Skin Template 
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<?xmlversion="1.0"?> 
<svg> 
<g id="s/fcwT> 
<use id= M TextBoxSkm" xlink:href="" x="" y="" /> 
<use id="ButtonSkin" xlink:href="" x="" y="" l> 
<use id=T>ropDownSkin" xlink:href="" x=" H y="" t> 
<gid="laber> 

<text id="5*i'«_bodyText" x="" y=""> </text> 
</g> 
<jg> 

<g id="skinDropDown"> 

<g id="skinDropDown_top"> 
</g> 

<g id="skinContextMenu_middle" display="all"> 

<text x=" N y="" id="label"> <text> 
</g> 

<g id="skinContextMenu_middle_hover" display="none"> 

<text x="" y="" id="label"> </text> 
<lg> 

<g id="skinPropDown_bottora"> 

<Jg> 
</g> 
</svg> 
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Example 'comb Box' Skin 

<?xml version="1.0"?> 
<svg> 

5 <g id="skinListBox"> 

<use id="TextBoxSkin" xlink:hre^' , skinTextBox_ListBox.svg#skinTextbox , ' x="0" 

y="0" f> 

<use id="ButtonSkin" xlillk:h^ef="skinButton_ListBox.svg#skinButton ,, x="200" 
y="0" r> 

10 <use id="DropDownSkin" 

xlink:hre^="skinContextMenu_Default.svg#skinContextMenu" x="0" y="0" !> 

<g id="label"> 



<text id="skinListBoxDefault_bodyText" x="0' 



="-6" fill="black"> <text> 



</ g > 



15 



^g> 



<gid="; 



'skinDropDown"> 



<gid=' 



'skinDropDown_top"> 



<linexl="0" 



yl="17" x2="0" y2="20" style="stroke:#OO0O0O;stroke-width:r 



20 l> 



<line xl="217" yl="17" x2="217" y2="20" 
style="stroke:#000000;stroke-width: 1 "/> 



<rect x="l" y="18" width="215" b.eight="2" style="fiU:#FFFFFF'7> 



</g> 



25 



<g id="skinContextMenu_middle" display="all"> 
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<linexl="0" yl="20" x2="0" y2="35" 
style="stroke:#000000;stroke-width: 1 " l> 

<line xl="150" yl="20" x2="150" y2="35" 
style="stroke:#000000;stroke-width: 1 " l> 

5 <rect x="l" y="20" width="148" height="14" 

style="fill:#FFFFFF;stroke:#FFFFFF;stroke-width: 1" isback="true"/> 

<text x="3" y="32" id="label"> </text> 

</g> 

<g id- , skinContextMenu_raiddle_hover' , display="none"> 

10 <line xl="0" yl="20" x2="0" y2="35" 

style="stroke:#000000;stroke-width: 1" /> 

<line xl="150" yl="20" x2="150" y2="35" 
style="stroke:#000000;stroke-width:l" t> 

<rect x="l" y="20" width="148" height="14" 
1 5 style="fill:#CCCCCC;stroke:#FFFFFF;stroke-width: 1 " isback="trae"/> 

<text x="3" y= ,, 32" id='*label"> </text> 

<Jg> 

<g id="skinDropDown_bottom' , > 

20 <line xl="0" yl="35" x2="0" y2="38" style="stroke:#000000;stroke-width:l" 

t> 

<line xl="217" yl="35" x2="217" y2="38" 
style="stroke:#000000;stroke-width:l" /> 

<line xl="0" yl="38" x2="217" y2="38" 
25 style="stroke:#000000;stroke-width:l"/> 

<rect x="l" y="36" width="215" height="2" style="fill:#FFFFFF"/> 
</g> 
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</g> 

</svg> 

The 'scrollBar' Skin Template 

5 <?xml version=" 1 .0"?> 
<svg> 
<g id="skinScrollBar"> 
<use id="SliderSkro" xlink:href="" x="" y="7> 
<use id="ButtonLeftSkin" xlink:hre£= M " x="" y="7> 
10 <use id="ButtonRightSkin" xlink:href="" x="" y=""/> 

<g id="comer"> 

<g> 
</g> 

<g id="ButtonLeftSkin"> 
15 <g id="up" display="all"> 

</g> 

<g id="down" display="none"> 
</g> 

</g> 

20 <gid="SliderSkin ,, > 

<g id="up" display="all"> 
<g id="body"> 
<g id="SUderSkinBar ,, > 

</g> 
25 </g> 
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<g id="SliderSkinThumb"> 

</g> 

<pattern id="barfill" width="" height="" pattemUnits="userSpaceOnUse"> 
</pattern> 

</g> 

<g id="mask" > 
<g id="sliderMask" > 
</g> 
</g> 
</g> 

<g id="ButtonRightSkin"> 
<gid="up ,, display= ,, all"> 

</g> 

<g id="down" display="none"> 

</g> 
</g> 

<g id="skinScrollBarSmaH"> 
<use id="SliderSkin" xlink:href="" x="" y=""/> 
<use id="ButtonLeftSkin" xlink:href= ,m x="" y=""f> 
<use id="ButtonRightSkin" xlink:href="" x="" y=""/> 
<g id="comer"> 

</g> 
</g> 

<g id="ButtonLeftSkinSmall"> 
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<g id="up" display="all"> 
</g> 

<g id="down" display="none"> 
</g> 

5 </g> 

<g id="SliderSkinSmall"> 
<g id="up" display="all"> 
<g id="SkinSliderSmallBorder" display="all"> 

</g> 

10 <gid="body"> 

<g id="SkinSliderSmallBase"> 
</ g > 

<g id="SkinSliderSmallBar"> 
</g> 

15 </g> 

<g id="SliderSkinSmallThumb"> 

<g id="sliderThumbBar"> 

</g> 
</g> 

20 <g id="tickMajor" display="none"> 

<text x="" y="" id="tickLabelMajor" xml:space="preserve" style='*"></text> 

</g> 
</g> 

<g id="mask" > 
25 <g id="sliderMask" opacity="0"> 
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</g> 
</g> 

</g> 

<g id="ButtonRightSkinSmall"> 
5 <gid="up"display="all"> 

</ g > 

<g id="down" display="none"> 
</g> 
<g> 
10 </svg> 

Example 'scroUBar' Skin 

<?xmlversion="1.0"?> 
<svg> 

15 <gid="skinScrollBar"> 

<use id="SliderSkin n xlink:href="skinScrollBar_Default.svg#SliderSkin" x="0" 
y="0*'/> 

<use id="ButtonLeftSkin" xlink:href="skinSc^ollBar_Default.svg#ButtonLeflSkin ,, 
x =»0" y="0"/> 

20 <use id="ButtonRightSkin" 

xlink:h^ef=^kinScrolBa^_Default.svg#ButtOI^ghtSkin ,, x="0" y="0'7> 

<g id- 'comer"> 

<rect fill="rgb(212 208 200)" x="0" y="0" width="16" height" 16" /> 

</g> 
25 </g> 
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<g id="ButtonLeftSkin"> 

<g id- 'up" fill-'none" stroke-linecap="square" shape-rendering="optimi2eSpeed" 
display="all"> 

<rect fill="rgb(212 208 200)" width="16" height="16" f> 

<linexl="15" yl="0" x2="15" y2="15" style="stroke:#404040"> 

<linexl="0" yl="15" x2="15" y2="15" style="stroke:#404040"/> 

<line xl="I" yl="l" x2="13" y2="l" style="stroke:#FFFFFF7> 

<linexl="l" yl="l" x2="l" y2= ,, 13" style="stroke:#FFFFFF"/> 

<line xl="l" yl="14" x2="14" y2="14" style="stroke:#808080"/> 

<linexl="14" yl="l" x2="14" y2="14" style="stroke:#8080807> 

<path fill="black" d="M9.5 5.51-3 313 3z" l> 

</g> 

<g id- 'down" fill-'none" stroke-linecap="square" 
shape-rendering="optimizeSpeed" display="none"> 

<rect fill="rgb(212 208 200)" width="16" height="16" /> 
<rect fill="none" style="stroke:#808080" width="16" height="16"/> 
<path fill="black" d="M10.5 6.51-3 313 3z" /> 
<J%> 
<Jg> 

<gid="SliderSkin"> 
<g id="up" display="all"> 
<g id="body"> 

<rect id="SliderSkinBar" fill="#E6E6E6" x="0" y="0" width="400" 
height="16"> 

</rect> 
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</g> 

<g id="SliderSkmThumb"> 

<rect id="sliderThumbBar" style="fill:rgb(212 208 
200);stroke:#000000;stroke-width:0" x="0" y="0" width="400" height="167> 

5 <line xl="0" x2="400" yl="15" y2="15" sty!e="stroke:#404040"A> 

<line xl="l" x2="398" yl="l" y2="l" style="stroke:#FFFFEF"£> 

</g> 

<pattem id="barfill" width="2" height="2" pattemUnits="userSpaceOnUse" 
shape-rendering= ,, optimizeSpeed"> 

10 <rect x="0" y="0" width="2" height="2" fill="white"/> 

<rect x="0 M y="0" width="l" height="l" fill='*rgb(212 208 200)"/> 

<rectx="l" y="l" width="l" height="l" fiU= M rgb(212 208 200)"/> 

</pattem> 

15 </g> 

<gid= ,, mask"> 

<rect id="sliderMask" x="0" y="0" width="400" height="16" opacity="0"/> 
</g> 
<Jg> 

20 <g id="ButtonRightSkin"> 

<g id="up" fill- 'none" stroke-linecap-'square" shape-rendering="optimizeSpeed" 
display="all"> 

<rect fill="rgb(212 208 200)" width="16" height="16" /> 

<line xl="15" yl="0" x2="15" y2="15" style="stroke:#404040"/> 

25 <line xl="0" yl="15" x2="15" y2="15" style="stroke:#404040"/> 
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<linexl='T" yl="l" x2="13" y2= n r style="stroke:#FFFFFF"/> 
<linexl="l" yl="l" x2='T' y2="13" style="stroke:#FFFFFF"/> 
<line xl="l" yl="14" x2="14" y2="14" style="stroke:#808080'7> 
<line xl="14" yl="l" x2="14" y2="14" style="stroke:#808080"/> 
5 <path fill=-black" d="M6.5 5.513 31-3 3z" l> 

</g> 

<g id="down" fill- "none" stroke-linecap-'square" 
shape-rendering='*optimizeSpeed" display="none"> 

<rect fill="rgb(212 208 200)" width**" 16" height="16" t> 

10 <rect fill="none" style="stroke:#808080" width="16" height="167> 

<path fill="black" d="M7.5 6.513 31-3 3z" /> 

</g> 

</g> 

15 

<g id="skinScrollBarSmall"> 

<use id="SliderSkin" xlink:href^"skiiiScrolBar_Default.svg#SliderSkiiiSmall" 
x =»0» y="0"/i> 

<use id="ButtonLeftSkin" 
20 xlink:href= , 'skinSc^ollBa^_Default.svg#ButtonLeftSkinSmall ,, x="0 M y="07> 

<use id="ButtonRightSkin" 
xlink:href=^kiiiScrollBar_Default.svg#ButtonRightSkinSmall ,, x= ,, 0 ,, y="O n /> 

<g id="corner"> 

<rect x="0 M y="0" width=" 1 0" height=" 1 0" 
25 style= ,, fill:#FFFFFF;stroke:#0O0000"/> 

<Jg> 
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</g> 

<g id="ButtonLeftSkinSmaH"> 

<g id="up" display="all M > 

<rect x="l" y=*T' width="10" height=" 10" 
styIe="fill-mle:evenodd;clip-mle:evenodd;fill:#FFFFFF;stroke:#B3B3B3;stroke-widft 
0001;stroke-miterlimit:2.6131;7> 

<rect x="0" y="0" width="10" height="10" 
style="fill:#FFFFFF;stroke:#000000"/> 

<text x ="5" y="5" 
style="font-family:Tahoma';stroke:none;font^ 

<path d="M 8 2 1 -6 3 1 6 3 z" 
style="ffll:#000000;stroke:#FF0000;stroke-width:07> 

</ g > 

<g id="down" display="none"> 

<rect x="l" y="l" width="10" height="10" 
style=''fill-mle:evenodd;clip-mle:evenodd;fill:#TFFFF;stroke:#B3B3B3 ;stroke-width: 1 . 
0001 ;stroke-miterlimit:2.61 3 1 ;7> 

<rect x= n l" y="l" width="10" height="10" 
style="fill:#FFFFFF;stroke:#000000"/> 

<text x ="5" y="5" 

style="font-family:Tahoma';stroke:none;font-size:12;text-anchor:middle"></tex^ 

<path d="M 9 3 1 -6 3 1 6 3 z" 
style='Till:#FF0000;stroke:#FF0000;stroke-width:07> 

<Jg> 
</g> 

<g id="SliderSkinSmaH"> 
<g id="up" display="all"> 
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<rect id^'SkinSliderSmallBorder" x="0" y="0" width="200" height="10" 
opacity="0'7> 

<gid="body"> 

<rect id="SkinSliderSmallBase" 
5 style="fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;stroke:#B3B3B3;stroke-width: 1 . 
0001;stroke-miterlimit:2.6131;" x= M l" y='T' width="444" height="10"/^ 

<rect id="SliderSkinSmallBar" style="fill:#FFFFFF;stroke:#000000" x="0" 
y="0" width="444" height="10"/> 

<Jg> 

10 <g id="SliderSkinSmallThumb"> 

<rect id="sliderThumbBar" 
style="fill:#B3B3B3;stroke:#000000;stroke-width:0" x= M 0" y="0" width="10" 
height="10"/> 

</g> 

1 5 <g id="tickMajor" display="none"> 

<text x="0" y=" 1 1 " id="tickLabelMajor" xml:space="preserve" 
style="font-face:Arial;font-size:8;fill:black;stroke:l;text-anchor:middle">< 

<Jg> 
</g> 

20 <g id="mask" > 

<rect id="sliderMask" x="" y="0" width="444" height="18" opacity="0"/> 

</ g > 
<Jg> 

<g id="ButtonRightSkinSmall"> 
25 <gid= ,, up"display= M all"> 
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<rect x="l" y="l" width="10" height="10" 
style="nil-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;stroke:#B3B3B3;stroke-wi(ith:l. 
0001 ;stroke-miterlimit:2.6 1 3 1 ;"/> 

<rect x="0" y="0" width="10" height="10" 
5 style="fill:#FFFFFF;stroke:#000000'7> 

<text x ="5" y="5" 

style="font-family:'Tahoma';stroke:none;font-size: 1 2;text-anchor:middle"> </text> 

<path d="M 2 2 1 6 3 1 -6 3 z" 
style="fill:#000000;stroke:#FF0000;stroke-width:07> 

10 </g> 

<g id="down" display="none"> 

<rect x="l" y="l" width="10" height="10" 
style="fill-rule:evenodd;clip-rule:evenodd;fiIl:#FFFFFF;stroke:#B3B3B3;stroke-width:l. 
000 1 ;stroke-miterlimit:2.6 1 3 1 ;"/> 

15 <rect x="l" y="l" width="10" height="10" 

style="fill:#FFFFFF;stroke:#000000"/> 

<text x ="5" y="5" 

style="font-family:'Tahoma';stroke:none;font-size:12;text-anchor:middle ,, ></text> 

<path d="M 3 3 1 6 3 1 -6 3 z" 
20 style="fill:#FFOOOO;stroke:#FFOOOO;stroke-width:0"/> 

</g> 
<y g > 
</svg> 

25 The 'slider' Skin Template 

<?xml version="1.0"?> 
<svg> 
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<gid= ,, skinSlider"> 
<gid="label"> 

<text x ="" y="" style=""> </text> 
<g> 

<gid="up" display="aU"> 
<g id="skinSliderBorder"> 
</g> 

<gid="body"> 
<g id="skinSliderBase"> 

</g> 

<gid="skinSUderBar"> 
</g> 
</g> 

<g id="skinSliderThumb"> 
</g> 

<g id="tickMajor" display="none"> 
<text id="tickLabelMajor" x="" y="" xml:space="preserve" style= 

</g> 

<g id="tickMinor" display="none"> 
</g> 
</g> 

<g id="down" display="none"> 
<g id="skinSliderBorder"> 
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</g> 

<gid="body"> 
<g id="skinSliderBase"> 

</g> 

5 <g id="skinSliderBar"> 

<Jg> 
</g> 

<g id="skinSliderThumb , '> 

</g> 

10 <g id="tickMajor" display="none"> 

<text id-'tickLabelMajor" x="" y="" xml:space="preserve" style=""x/text> 

</g> 

<g id="tickMinor" display="none n > 

</g> 
15 </g> 

<g id="hover" display="none"> 
<g id="skinSliderBorder"> 

<g> 

20 <g id="body ,, > 

<g id="skinSliderBase"> 
</g> 

<g id="skinSliderBar"> 

</g> 
25 </g> 

-65- 



CA 02414378 2002-12-09 

<g id="skinSliderThumb"> 
</g> 

<g id="tickMajor" display="none"> 
<text id="tickLabelMajor" x="" y="" xml:space="preserve" styte=""x/text> 
5 </g> 

<g id="tickMinor" display="none"> 

</g> 

</g> 



<g id="disabled" display="none"> 
<g id="skinSliderBorder"> 
<J g > 

<g id="body"> 
15 <g id="skinSliderBase"> 

</g> 

<gid="skinSliderBar"> 

</g> 
</g> 

20 <g id="skinSliderThumb"> 

</g> 

<g id="tickMajor" display= M none"> 

<text id="tickLabelMajor" x- '" y="" xml:space="preserve" style=""x/text> 
</g> 

25 <g id="tickMinor" display="none"> 
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</g> 
<Jg> 

<g id="mask" > 
5 <g id="skinSliderMask"> 

</g> 
</g> 
</g> 

</svg> 

10 

Example 'slider' Skin 

<?xml version="i.0"?> 
<svg> 
<g id="skinSlider"> 
15 <gid="label n > 

<textx ="210" y="18" style^'font-familyiTahoma^strokeinonejfont-sizern;^ 

</text> 
<g> 

<g id="up" display="aU"> 

20 <rect id= M skinSliderBorder" x="0" y="0" width="200" height="18" fill="none" 

stroke="none" pointer-events="fiU7> 

<g id="body"> 

<rect id="skinSliderBase" style="fill:#FFFFFF;stroke:none" x="0" y="7" 
width="200" height="47> 

25 <rect id="skinSliderBar" style= ,, fin:#FFFFFF;stroke:none ,, x="0" y="7" 

width="200" height="4"/> 
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<line xl="0" yl="7" x2="200" y2="7" style="stroke:#B3B3B37> 

</g> 

<g id="skinSliderThumb"> 

<tircle cx="3" cy="3" r="3" style=Till:black;stroke:none"/> 

<circle cx="3" cy="15" i="3" style="fill:black;stroke:none7> 

<rect style="fill:rgb(230,230 ) 230);stroke:none n x="0" y="3" width="6" 
heighfr»"127> 

<line xl="0 n yl="3" x2="0" y2="15" style^'stroketfBSBSBSjstroke-width:!'^ 
<line xl="1.5" yl="3" x2="1.5" y2="15" style="stroke:white;stroke-width:2"/> 
<line xl^'6" yl="3" x2="6" y2="15" style="stroke:#B3B3B3;stroke-width:l"/> 
</g> 

<g id="tickMajor" display="none"> 

<linexl="0" yl="7" x2="0" y2="17" style="stroke:#B3B3B3"/> 

<text id="tickLabelMajor" x="0" y="12" xml:space= ,, preserve" 
style=' , font-face:Arial;font-size:8;fill:#B3B3B3;stroke:l;text-anchor:middle"X/text> 
</g> 

<g id- 'tickMinor" display="none"> 

<line xl="0" yl="7" x2= n 0" y2= M ll" style="stroke:#B3B3B37> 
</g> 
</g> 

<g id="down" display="none"> 

<rect id="skinSIiderBorder" x="0" y="0" width="200" height="18" fill="none" 
stroke="none" pointer-events="fiir/> 

<gid="body"> 
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<rect id="skinSliderBase" style="fill:#FFFFFF;stroke:none" x='*0'* y="7 ,, 
width="200" height="4"/> 

<rect id^'skinSliderBar" style="fill:#FFFFFF;stroke:none" x="0" y="7" 
width="200" height="47> 

<linexl="0 M yl="7" x2="200" y2="7" style^'strokerblack^ 

</g> 

<g id="skinSliderThumb"> 

<circle cx="3" cy="3" r="3" style="fiU:#199DBF;stroke:none7> 

<circle cx="3" cy="15" r="3" style="fill:#199DBF;stroke:none7> 

<rect style="ffll:rgb(230,230,230);stroke:none" x="0" y= M 3" width="6" 
height="127> 

<linexl="0" yl="3" x2="0" y2="15" style="stroke:#B3B3B3;stroke-width:l"> 
<linexl="1.5" yl="3" x2="1.5" y2="15" style="stroke:white;stroke-width:2"/i> 
<line xl="6" yl="3" x2="6 H y2="15" style^-stroke^BSBSBSsstroke-width:!"/^ 

</g> 

<g id="tickMajor" display="none"> 

<line xl="0" yl="7" x2="0" y2="17" style="stroke:black7> 

<text id="tickLabelMajor" x="0" y="12" xral:space="preserve" 
style="font-face:Arial;font-size:8;fill:black;stroke:l;text-anchor:middle"></text> 

</g> 

<g id="tickMinor" display="none"> 

<line xl="0" yl="7" x2="0" y2= ,, ll" style="stroke:bIack7> 
<Jg> 

<lg> 



<g id- 'hover" display="none"> 
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<rect id="skinSUderBorder" x="0" y="0 M width="200" height="18" fill="none" 
stroke="none" pointer-events- 'fill7> 

<gid="body"> 

<rect id="skinSliderBase" style="fill:#FFFFFF;stroke:none" x="0" y="7" 
width="200" height="47> 

<rect id="skinSliderBar" style="fill:#FFFFFF;stroke:none" x="0" y="7" 
width="200" height="47> 

<line xl="0" yl="7" x2="200" y2="7" style="stroke:black7> 

<Jg> 

<g id="skinSliderThumb"> 

<circle cx="3" cy="3" r= n 3" style="fill:#199DBF;stroke:none"/> 

<circle cx="3" cy="15" r= M 3" style= ,, fill:#199DBF;stroke:none7> 

<rect style="fill:rgb(230,230,230);stroke:none" x="0" y="3" width="6" 
height="12"/> 

<linexl="0" yl="3" x2="0" y2= ,, 15 n style="stroke:#B3B3B3;stroke-width:l"/> 
<line xl="1.5" yl="3" x2="1.5" y2= ,, 15" style="stroke:white;stroke-width:2"> 
<line xl="6" yl="3" x2="6" y2="15" style="stroke:#B3B3B3;stroke-width:r/> 
</g> 

<g id="tickMajor" display="none"> 

<line xl="0" yl="7" x2="0" y2="17" style="stroke:black"/> 

<text id="tickLabelMajor" x="0" y="12" xmlrspace^'preserve" 
style='Tont-face:Arial;font-size:8;fill:black;stro^ 

</g> 

<g id="tickMinor" display="none"> 

<line xl="0" yl="7" x2="0" y2="l 1" style="stroke:black M /> 
</g> 
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</g> 

<g id="disabled" display="none"> 
<rect id^'skinSliderBorder" x="0" y="0" width="200" height="18" fill="none" 
5 stroke="none" pointer-events="fiH"/> 

<gid="body"> 

<rect id="skinSliderBase" style="fill:#FFFFFF;stroke:none" x="0" y="7" 
width="200" height="4"/> 

<rect id="skinSliderBar" style="fill:#FFFFFF;stroke:none" x="0" y="7" 
10 width="200" height="47> 

<line xl="0" yl="7" x2="200" y2="7" style="stroke:#B3B3B37> 
<g> 

<g id="skinSliderThvunb"> 

<circle cx="3" cy="3" r="3" style="fill:black;stroke:none"/> 

15 <circle cx="3" cy="15" r="3 n style="fill:black;stroke:none"/> 

<rect style= ,, fill:rgb(230,230,230);stroke:none" x= M 0" y="3" width="6" 
height="127> 

<line xl="0" yl="3" x2="0" y2="15" style^"#stroke:B3B3B3;stroke-width:17> 
<line xl="1.5" yl="3" x2="1.5" y2="15" style="stroke:wbite;stroke-width:2"/> 
20 <line xl="6 M yl="3" x2="6" y2= ,, 15" style="#stroke:000000;stroke-width:17> 

</g> 

<g id="tickMajor" display="none"> 

<line xl="0" yl="7" x2="0" y2="17" style="stroke:#B3B3B37> 

<text id="tickLabelMajor" x="0" y="12" xml:space="preserve" 
25 style^*Tont-face:Arial;font-size:8;ffll:#B3B3B3^ 

</g> 
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<g id- 'tickMinor" display="none"> 
<line xl= M 0" yl="7" x2="0" y2="ll" style="stroke:#B3B3B3"/> 

</g> 

</g> 

5 

<g id="mask" > 

<rect id^'skinSliderMask" x="-4" y="0" width^OS" height="18" fiU="none" 
stroke-'none" pointer-events="fill"/> 

</g> 
10 </g> 
</svg> 

The 'spin' Skin Template 

<?xmlversion="1.0"?> 
15 <svg> 

<g id="skinSpin"> 
<use id^'TextBoxSkin" xlink:href= ,m x="" y="7> 
<use id="ButtonSkinUp" xlinkrhref^"" x="" y="7> 
<use id="ButtonSkinDown" xlink:href="" x="" y=""/> 

20 

<g id="label"> 

<text x= n " y="" style= ,m > </text> 
</g> 
</g> 

25 
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<g id="skinSpinButtonUp"> 
<gid="up"display="air> 
</g> 

<g id="down" display="none"> 
</g> 

<g id="hover" display="none"> 

</g> 

<g id="disabled" txansform="scale(0.5)" display="none 

</g> 

</g> 

<g id="skinSpinButtonDown"> 
<g id="up" display="air> 

</g> 

<g id="down" display="none"> 
</g> 

<g id="hover" display="none"> 
</g> 

<g id="disabled" display="none"> 

</g> 
</g> 

</svg> 

Example 'spin* Skin 

<?xml version="l .0"?> 
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<svg> 
<g id="skinSpin"> 

<use id="TextBoxSkin" xlink:href=*'skinTextBox_Listbox_Short.svg#skinTextbox" 
x =»0" y="0"/> 

5 <use id="ButtonSkinUp" xlink:h^ef^ l, skinSpin_Composite.svg#skinSpinButtonUp ,, 

x="100" y="-rv> 

<use id="ButtonSkinDown" 
xlink:h^e^"skinSpin_Composite.svg#skinSpinButtonDowIl ,, x=" 1 00" y="8'7> 

<g id="label"> 

10 <text x="0" y="-6" style="font-size:12;fill:black"> </text> 

<Jg> 

</g> 

<g id="skinSpinButtonUp"> 

1 5 <g id="up" display="air> 

<rect x="0" y="0" width="18" height="9" 
style="fill:rgb(230,230,230);stroke:none*V> 

<polylinepoints="0,9 0,0 18,0" sty^'^troke-widthajstrokeiwhiteifillinone"^ 

<polylinepoints="0,9 18,9 18,0" style="stroke-width:l;stroke:black;fill:none"/> 

20 <polygon points="3,6 9,3 1 5,6" style="stroke-width: 1 ;stroke:black;fill:black"/> 

</g> 

<g id="down" display="none"> 

<rect x="0" y="0" width="18" height="9" 
style^"fill:rgK230,230,230);stroke:none"/> 

25 <polyline points="0,9 0,0 1 8,0" style="stroke-width: 1 ;stroke:black;fill:none'7> 

<polylinepoints="0,9 18,9 18,0" style="stroke-width:l;stroke:white;fill:none"/> 

-74- 



CA 02414378 2002-12-09 



<polygon points="3,6 9,3 15,6" 
style="stroke-width:l;stroke:#199DBF;fill:#199DBF7> 

</g> 

<g id-'hover" display="none"> 

5 <rect x="0" y="0" width="l 8" height="9" 

style="fill:rgb(230,230,230);stroke:none"/> 

<polyline points="0,9 0,0 18,0" style="stroke-width:2;stroke:white;fill:none"/> 

<polylinepoints="0,9 18,9 18,0" style="stroke-width:2;stroke:black;fill:none"/> 

<polygon points="3,6 9,3 15,6" 
10 style="stroke-width:l;stroke:#199DBF;fiU:#199DBF"/i> 

</g> 

<g id="disabled" style="opacity:0.5" transform="scale(0.5)" display="none"> 

<rect x="0" y="0" width="18" height="9" 
style="fill:rgb(230,230,230);stroke:none'7> 

1 5 <polyline points="0,9 0,0 1 8,0" style="stroke-width: 1 ;stroke:white;fill:none"/> 

<polyline points="0,9 18,9 18,0" style="stroke-width:l;stroke:black;fill:none"/> 

<polygon points="3,6 9,3 15,6" style="stroke-width:l;stroke:black;fiU:black"/> 

</g> 
</g> 

20 

<g id="skinSpinButtonDown"> 

<gid="up" display="all"> 

<rect x="0" y="0" width="18" height="9" 
style="fiU:rgb(230,230,230);stroke:none"/> 

25 <polyline points="0,9 0,0 1 8,0" style="stroke-width: 1 ;stroke:white;fill:none"/> 

<polyline points="0,9 18,9 18,0" style="stroke-width:l;stroke:black;fill:none"/> 
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<polygonpoints="3,3 9,6 15,3" style="stroke-width:l;stroke:black;fill:black"/> 
</g> 

<g id="down" display="none"> 

<rect x="0" y="0" width="18" height="9" 
5 style="fill:rgb(230,230,230);stroke:none"/> 

<polylinepoints="0,9 0,0 18,0" style="stroke-width:l;stroke:black;fiU:none7> 

<polylinepoints="0,9 18,9 18,0" style="stroke-width:l;stroke:white;fill:none"A> 

<polygon points="3,3 9,6 15,3" 
style="stroke-width:l;stroke:#199DBF;fiU:#199DBF"/> 

10 </g> 

<g id="hover" dispIay="none"> 

<rect x="0" y="0" width="18" height="9" 
style="fill:rgb(230,230,230);stroke:none , 7> 

<polyline points="0,9 0,0 18,0" style="stroke-width:2;stroke:white;fill:none7> 

15 <polyline points="0,9 18,9 18,0" style="stroke-width:2;stroke:black;fill:none"/> 

<polygon points="3,3 9,6 15,3" 
style="stroke-width:l;stroke:#199DBF;fiU:#199DBF"^> 

</g> 

<g id="disabled" style="opacity:0.5" display="none"> 

20 <rect x="0" y="0" width=" 18" height="9" 

style="fill:rgb(230,230,230);stroke:none"/> 

<polylinepoints="0,9 0,0 18,0" style="stroke-width:l;stroke:white;fill:none"> 
<polyline points="0,9 18,9 18,0" style="stroke-width:l;stroke:black;fill:none"/> 
<polygonpoints="3,3 9,6 15,3" style= ,, stroke-width:l;stroke:black;fill:black"/> 
25 </g> 

</g> 
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</svg> 

The 'textBox' Skin Template 

<?xmlversion="1.0"?> 
5 <svg> 

<g id="skinTextboxScroll"> 
<use id= M TextBoxSkin" xlink:href^"" x="#skinTextbox" y=""/> 
<use id="VertScrollSkin" xlink:href="" x="" y=""A> 
<use id="HorizScrollSkin" xlink:hre^"" x="" y="7> 
10 <l%> 

<g id="skinTextbox"> 
<g id="up" display="all"> 

</g> 

15 <g id="hover" display="none"> 

</g> 

<g id- 'down" display="none"> 

</g> 

<g id="disabled" display="none"> 
20 </g> 

<g id="label"> 

<textx="238" y="14" style="font-size:12;fill:black"> </text> 
</g> 

<clipPathid="skinTextbox_textView"> 
25 </clipPath> 
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<text clip-path="url(#skinTextbox_textView)" id="skinTextbox_text" 
xml:space="preserve" x="" y="" style=""x/text> 

</g> 
<svg> 

5 

Example 'textBox' Skin 

<?xmlversion= ,, 1.0"?> 
<svg> 

<g id="skinTextboxScroll"> 

1 0 <use id="TextBoxSkin" xlink:href="#skinTextbox" x="0" y="0"/> 

<use id="VertScrollSkin" 
xlink:href^"skinScrollBar_Default.svg#skinScrollBarSmall ,, x="0 ,, y="0"/> 

<use id="HorizScrollSkin" 
xlink:href^ ,, skinScrolBar_Default.svg#slanScrollBarSmall ,, x="0 ,, y="0 ,, /> 

15 <yg> 

<g id="skinTextbox"> 
<g id="up" 

style="fill-rule:nonzero;clip-rule:nonzero;stroke:#000000;stroke-miterlimit:4;'' 
20 display="aH"> 

<rect 

style="fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;stroke:#B3B3B3;stroke-width:l. 
0001;stroke-miterlimit:2.6131;" x="3" y="3" width="228" height="187> 

<rect style="fill:white;stroke:grey" x="0" y="0" width="228" height="18"/> 
25 </g> 
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<g id= n hover H 
style-'fill-mle:nonzero;cH^ 
display="none"> 

<rect 

style-Till-mle:evenodd;clip-rule:evenodd;fill:#FFFFFF;stroke:#B3B3B3;s 
0001;stroke-miterlimit:2.6131;" x="3" y="3" width="228" height-" 18"/> 

<rect style-"fill:white;stroke:#000000" x="0" y="0" width="228" height= M 18"/i> 

</g> 

<g id="down" 
style="fill-mle:nonzero;clip-mle:no^ 
display="none"> 

<rect 

style="fill-rule:evenodd;clip-mle:evenodd;fill:#FFFFFF;stroke:#^ 
0001;stroke-Initerlimit:2.6131; ,, x-"3" y-"3" width="228" height="187> 

<rect style-"fill:white;stroke:#000000" x="0" y-"0" width="228" height-" 187> 

<line id-"skinTextbox_cursor" xl="3" x2="3" y2="16" 

style="stroke:black"> 

<animate attributeType="CSS" attributeName="opacity" 
values= n O;0;0;0;0;0; 1 ;1 ; 1 ; 1 ; 1 ; 1 " dui-" 1 s" repeatCount="indefinite7> 
</line> 
</g> 

<g id="disabled" 
style-"fill-mle:nonzero;clip^ 
" display="none"> 

<rect 

style=Till-rule:evenodd;clip-mle:eve^ 

0001;stroke-miterlimit:2.6i31;" x-"3" y-"3" width="228" height-' 1 1 8 7> 

<rect style="fill:gray;stroke:#000000" x="0" y="0" width-"228" height="187> 
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</g> 

<gid="label"> 

<text x="238" y="14" style="font-size:12;fill:black"> </text> 
</g> 

<clipPath id="skinTextbox_textView"> 

<rect id="skinTextbox_textArea" x="3" y="3" width="222" height="12"/> 
</clipPath> 

<text clip-path="url(#skinTextbox_textView)"id="skinTextbox_text" 
xml:space="preserve" x="3" y="15" 

style="font-face:Arial;font-size:12;fill:black;stroke:l"xytext> 

</g> 

<g id="skinTextboxMultiLine"> 
<g id="up" 

style="fill-mle:nonzero;clip-mle:nonzero;stroke:#000000;stroke-miterUmit:4;" 
display=**all"> 

<rect 

style="fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;stroke:#B3B3B3;stroke-width:l. 
0001;stroke-miterlimit:2.6131;" x='*3" y="3" width="228" height="54'7> 

<rect style=*'fill:white;stroke:grey" x="0" y="0" width="228" height="54"£> 

</g> 

<g id="hover" 

style=Till-rule:nonzero;clip-rule:nonzero;stroke:#000000;stroke-miterlimit:4;" 
display="none"> 

<rect 

style="fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;stroke:#B3B3B3;stroke-width:l. 
0001;stroke-miterlimit:2.6131;" x="3" y="3" width="228" height="547> 
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<rect style='*fill:white;stroke:#000000" x="0" y="0" width="228" height="54"/> 
</g> 

<g id="down" 
style^"fill-mle:nonzero;clip-nde:no^ 
display="none"> 

<rect 

style=Till-rule:evenodd;cHp-mle:evenodd;ffl^ 

0001;stroke-miterlimit:2.6131;" x="3" y="3" width="228" height="54"/> 

<rect style^"fill:white;stroke:#000000" x="0" y="0" width="228 M height="547> 

<line id="skinTextboxMultiLine_cursor" xl="3" yl="2" x2="3" y2="16 n 
style="stroke:black"> 

<animate attributeType="CSS" attributeName="opacity" 
values="0;0;0;0;0;0;l;l;l;l;l;l" dui="ls" repeatCount^'indefinite7> 

</line> 

</g> 

<gid="disabled" 
style="M-role:nonzero;clip-role:nonzero;^ 
" display="none"> 

<fect 

style="fill-mle:evenodd;clip-mle:evenodd;mi:#FFFFFF;stroke:#B3B3B3;stroke-width:l. 
0001;stroke-miterlimit:2.6131;" x=*'3" y="3" width="228" height="54 ,, /> 

<rect style^'fillrgrayistroke^OOOOOO" x="0" y="0" width="228" height= ,, 54"/> 

</g> 

<cIipPathid= M skinTextboxMuItiLine_textView"> 

<rect id="skinTextboxMultiLine_textArea" fill="green" x="3" y="3" width="222" 
height="48"/i> 

<clipPath> 
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<text clip-path="url(#skinTextboxMultiLine_textView)" 
id="skinTextboxMultiLiiie_text" xml:space="preserve" x="3" y= ,, 15" 
style="font-face:Arial;font-size:12;fill:black;stroke:none"x/text> 

</g> 
5 </svg> 

The 'toolTip' Skin Template 

<?xmlversion="1.0"?> 
<svg> 

10 <g id- 'skinTooltip_name"> 

<text x= nH y=" M style="">tip</text> 
</g> 
</svg> 

15 Example 'toolTip' Skin 

<?xml version="l .0"?> 
<svg> 

<g id="skinTooltip_annotation"> 
<palh style="ffll:#FFFF00;fill-op^ 
20 d="M0 96198 0-56-96 106 96 202 0 0 167-352 0 0-167z'7i> 

<text x="10" y="150" style="font-size:16;fill:black">tip<ytext> 
<Jg> 

<g id="skinTooltip_traditional" pointer-events="none"> 
25 <rect x="0" y="0" width="150" height="15" 
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style="fill:rgb(255,255,225);fill-opacity:0.9" stroke="black" stroke-width="l"> 
<textx="5" y="12" style="font-size:12;ffll:black">tip</text> 
</g> 

<g id= n skinTooltip_speciar' pointer-events="none"> 
<rect x="0" y="0" widtfi=" 1 50" height=" 1 5" 

style="fill:rgb(130,l 30,1 30);fill-opacity:0.5" stroke="black" stroke-width="l 7> 
<text x="5" y="12" style="font-size: 12;fill:black">tip</text> . 
<Jg> 
</svg> 

Other Example Skins for tfl Controls 
skinButton_ComboBox.svg 

<?xml version=" 1 .0"?> 
<svg xmlns:dsvg="http://corel.org/dsvg" > 
<g id="skinButton"> 
<gid="label"> 

<text x ="50" y="13" style="font-family:Tahoma';stroke:none;font- 
size: 1 2;text-anchor:middle"> </text> 

</g> 

<gid="up" display="aU" style="stroke-width:l"> 

<rect x="0" y="0" width="17" height="17" 
style="fill:#000000;stroke:#A3A3A3"/^ 

<path d="M 5 5 1 6 0 1 -3 6 z" style="fill:#FFFFFF;stroke:#FEFFFF"/> 
<dsvg:constraint preserveAspectRatio="vertical" hAlign="right"/> 
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</g> 

<g id- 'down" display="none"> 

<rect x="0" y="0" width="17" height="17" 
style="fill:#199DBF;stroke:#A3A3A3"/> 

5 <path d="M 5 5 1 6 0 1 -3 6 z" style^"fill:#FFFFFF;stroke:#FFFFFF"/> 

<dsvg:constraint preserveAspectRatio-'vertical" hAlign="right7> 

</g> 

<g id="hover" display="none"> 

<rect x="0" y="0" width="17" height="17" 
10 style="fill:#199DBF;stroke:#A3A3A37> 

<pathd="M 5 5 16 0 1-3 6z" style="fill:#FFFFFF;stroke:#FFFFFF ,, /> 

<dsvg:constraint preserveAspectRatio-'vertical" hAlign="right"/> 

</g> 

<y g > 

15 </svg> 

skinButton ListBox.svg 

<?xml version="1.0"?> 
<svg> 

20 <g id="skinListBox"> 

<gid="up" display="all"> 

<g id="skinListBox_label"> 

<text x="0" y="-5" style= M fill:#000000;font- 
weight:nonnal;font-size: 12;font-family:Tahoma"> </text> 

25 </g> 
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<g id="skinListBox_body" style="fill:none"> 

<rect x="0" y="0" width="200" height= n 17" 
style="fill:#FFFFFF;stroke:#A3A3A3;stroke-width: 1 7> 

<rect x="200" y="0" width="17" height="17" 
style="fill:#000000;stroke:#A3 A3 A3;stroke-width: 1 "/> 

<path d="M 205 5 1 6 0 1 -3 6 z" 
sty^-fiUOTFFFF^trokeiSFFFFFFjstroke-width: 1 "/> 

<text id="skinListBox_bodyTexf x="5" y="13" 
style=YiU:#676767;font-weight:normal;fo^ 

</ g > 

<g id- 'skinListBoxJjodyCover'^ 

<rect x="0" y="0" width="200" height="17" fill="none" 
stroke- 'none" pointer-events="fiU'7> 

</g> 

<g id="skinListBox_dropDownButton"> 

<rect x="200" y="0" width="17" height="17" 
style="fill:#000000;stroke:#000000;stroke-width:l"/> 

<path d="M 205 5 1 6 0.1 -3 6 z" 
style="fill:#FFFFFF;stroke:#FFFFFF;stroke-width: 1 7> 

</g> 

</g> 

<g id="down" display= ,, none"> 

<g id="skinListBox_label"> 

<text x="0" y="-5" style="fill:#000000;font- 
weight:normal;font-size:12;font-family:Tahoma"></text> 
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</g> 

<g id="skinListBox_body" style= ,, fill:none"> 

<rect x="0" y="0" width="200" height="17" 
style="fdl:#FFFFFF;stroke:#A3A3A3;stroke-width:17> 

5 <rect x= H 200 n y="0" width="17 M height="17" 

style="fill:#000000;stroke:#A3A3A3;stroke-width:17> 

<path d="M 205 5 1 6 0 1 -3 6 z" 
style="fill:#FFFFFF;stroke:#FFFFFF;stroke-width: 1 7> 

<text id="skinListBox_bodyText" x="5" y="13 M 
10 style=Till:#676767;font-weight:nonnal;font-size:12;font-family:Tahoma ,, ></text> 

</g> 

<g id="skinListBox_bodyCover"> 

<rect x="0" y="0" width="200" height="17" fill="none" 
stroke-'none" pointer-events- 'fiU7> 

15 </g> 

<g id="skinListBox_dropDownButton"> 

<rect x="200" y="0" width="17" height="17" 
style="fiU:#l 99DBF;stroke:#l 99DBF;stroke-width: 1 7> 

<path d="M 205 5 1 6 0 1 -3 6 z" 
20 style="fill:#FFFFFF;stroke:#FFFFFF;stroke-width:r7> 

<g> 

</g> 

<g id- 'hover" display="none"> 
25 <g id="skinListBox_label"> 
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<text x="0" y="-5" style="fill:#000000;font- 
weight:normal;font-size:12;font-family:Tahoma"></text> 

</g> 

<g id="skinListBox_body" style^'filhnone'^ 

5 <rect x="0" y="0" width="200" height="17" 

style="fill:#FFFFFF;stroke:#A3A3A3;stroke-width:l"/> 

<rect x= M 200" y="0" width="17" height="17" 
style="fill:#000000;stroke:#A3A3A3 ;stroke-width: 1 "/> 

<path d= M M 205 5 1 6 0 1 -3 6 z" 
10 style="fill:#FFFFFF;stroke:#FFFFFF;stroke-width:r'/> 

<text id= M skinListBox_bodyText" x="5" y="13" 
style=Till:#676767;font-weight:normal;font-size:12;font-family:Tahoma"></text> 

</g> 

<g id="skinListBox_bodyCover"> 

15 <rect fill="none" stroke="none" pointer-events="fill" x="0" 

y="0" width="200" height=" 1 7'7> 

</g> 

<g id="skinListBox_dropDownButton"> 

<rect x="200" y="0" width="17" height="17" 
20 style="fill:#199DBF;stroke:#199DBF;stroke-width:l"/> 

<path d="M 205 5 1 6 0 1 -3 6 z" 
style="fill:#FFFFFF;stroke:#FFFFFF;stroke-width:l"> 

</g> 

</g> 

25 

<g id="skinListBox_dropDownList"> 
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<g id="skinListBox_dropDownList_top"> 

<Iine xl="0 M yl="17" x2= M 0" y2="20" 
style- 'stroke:#000000;stroke-width: 1" l> 

<line xl="217" yl="17" x2="217" y2="20" 
5 style="stroke:#000000;stroke-width: 1 " l> 

<rect x="l" y="18" width="215" height="2" 

style="fill:#FFFFFF"/> 

</g> 

<g id- l sMnLislBox_dropDownList_nuddle' l > 

10 <line xl = "0" yl="20" x2="0" y2="35" 

style="stroke:#000000;stroke-width: 1 " t> 

<line xl="217" yl="20" x2="217" y2="35" 
style="st^oke:#000000;stIoke-width:l ,, /> 

<rect x= n l" y="20" width="215" height="14" 
15 style="fill:#FFFFFF;stroke:#FFFFFF;stroke-width:l" isback="true"/> 

</g> 

<g id="skinListBox_dropDownList_bottom"> 

<line xl="0" yl="35" x2="0" y2="38" 
style=*'stroke:#000000;stroke-width: 1" l> 

20 <line xl="217" yl="35 M x2="217" y2="38" 

style="stroke:#000000;stroke-width: 1 " /> 

<line xl="0" yl="38" x2="217" y2="38" 
style="stroke:#000000;stroke-width: 1" /> 

<rect x="l" y="36" width="215" height="2" 

25 style="fill:#FFFFFF'7> 

</g> 

<J%> 
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</g> 

</svg> 

skinButton_vpDown.svg 

5 <?xmlversion="1.0"?> 
<svg> 

<g id="skinButton"> 
<g id="label"> 

<textx ="50" y="13" style="font-family:'Tahoma';stroke:none;font- 
10 size: 12;text-anchor:middle"> </text> 

</g> 

<g id="up" display="all"> 
<path fill="#CCCCCC" d="M4 115 1 1 5 -1 1 -10 0z"/> 
<path fill="#E5FFFF" stroke="#0083C4" d="Ml 115 1 1 5 -1 1 -10 0z"/> 
15 </g> 

<g id="down" display="none"> 
<path fill="#CCCCCC" d="M4 115 1 1 5 -1 1 -10 0z"/> 

<path fill="#EDAF0D" stroke="#0083C4" stroke-width="2" d="Ml 115 11 5 -11 -10 

0z7> 

20 </g> 

<g id="hover" display="none"> 
<path fill="#CCCCCC" d="M4 115 11 5 -11 -10 0z"/> 
<path fill="#E5FFFF" stroke="#0083C4" stroke-width="2" d="Ml 115 1 1 5 -1 1 -10 0z7> 
</g> 

25 <g id="disabled" style="opacity:0.5" display="none"> 
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</g> 

</g> 

</svg> 

5 skinButton_vpGeneric.svg 

<?xmlversion="1.0"?> 
<svg> 

<g id="skinButton"> 
<g id="label"> 

10 <text x="9" y="12" fill="#000000" font-weight="nomlal ,, font- 

size^* 1 0" font-family="Verdana"> </text> 

</g> 

<gid="up"display="air> 
<path fill="#CCCCCC" d="M56 181-52 0 0 -15 52 0 0 15z7> 
15 <path fill="#FFFFFF" stroke="#0083C4" d="M54 151-53 0 0 -15 53 0 0 15z'7> 

</g> 

<g id="down" display="none"> 

<path fill="#CCCCCC" d="M56 181-52 0 0 -15 52 0 0 15z7> 

<path fill="#EDAFOD" stroke="#0083C4" stroke-width="2" d="M54 151-53 0 0 -15 53 
20 0 0 15z"/> 

</g> 

<g id="hover" display="none"> 

<path fill="#CCCCCC" d="M56 181-52 0 0 -15 52 0 0 15z"/> 

<path fill="#FFFFFF" stroke= ,, #0083C4 ,, stroke-width="2" d="M54 151-53 0 0 -15 53 
25 0 0 15z7> 
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</g> 

<g id="disabled" style="opacity:0.5" display="none"> 
<path fill= H #CCCCCC" d="M56 181-52 0 0 -15 52 0 0 Uz"/> 
<path fill="#FFFFFF" stroke="#CCCCCC" d="M54 151-53 0 0 -15 53 0 0 15z7> 

</g> 

</g> 

</svg> 

skinButton_vpMonth.svg 

<?xmlversion="1.0"?> 
<svg> 

<g id="skinButton ,, > 
<gid="laber> 

<textx="22" y="l 1 " fill="#666666" font-weight="bold" font-size="7" 
font-family="Verdana"> </text> 

</ g > 

<gid= ,, up"display= ,, all"> 
<rect fill="#B2E5E5" x="0" y="14" width="40" height="4"/i> 
<rect fill«="#B2E5E5" x="0" y="0" width="40" height="47> 
<rect fill="#FFFFFF" fill-opacity="0" x="0" y="0" width="40" height="187> 

</g> 

<g id="down" display="none"> 
<rect fill="#98B2E5" x="0" y="14" width="40" height="4 ,, /> 
<rect fill="#98B2E5" x="0" y= M 0" width="40" height="4'7i» 
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<rect fill="#FFFFFF" fill-opacity="0" x="0" y="0" width="40" height="18"/> 

</g> 

<g id="hover" display="none"> 
<rect fill="#98B2E5" x="0" y="14" width="40" height= tt 4"/> 
<rect fill="#98B2E5" x="0" y="0" width="40" height="47> 
<rect fill="#FFFFFF" fill-opacity="0" x="0" y="0" width="40" height="187> 

</g> 

<g id- 'disabled" display="none"> 
<rect fill="#CCCCCC" x="0" y="14" width="40" height="47> 
<rect fill="#CCCCCC" x="0" y="0" width="40" height="47> 
<rect fill-'#FFFFFF" fill-opacity="0" x="0" y="0 n width="40" height="187> 

</ g > 

</g> 

</svg> 

skinButton_vpUp.svg 

<?xml version="1.0"?> 
<svg> 

<g id- 'skinButton"> 
<g id="label"> 

<text x ="50" y="13" style=*'font-family:Tahoma';stroke:none;font- 
size: 1 2;text-anchor:middle"> </text> 

</g> 

<g id="up" display="all"> 
<path fill="#CCCCCC" d="M15 141-4 -11-5119 0z"/> 
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<path fill="#E5FFFF" stroke="#0083C4" d="M12 131-5 -12 -5 12 10 0z"/> 
</g> 

<g id- 'down" display="none"> 

<path fill="#CCCCCC" d="M15 141-4 -11-5 119 0z7> 

5 <path fill="#EDAF0D" stroke="#0083C4" stroke-width="2" d="M12 131-5 -12 -5 12 10 
0z"/> 

</g> 

<g id- 'hover" display="none"> 

<path fill="#CCCCCC" d="M15 141-4 -11-5119 0z"/> 

10 <path fill="#E5FFFF" stroke="#0083C4" stroke-width="2" d="M12 131-5 -12 -5 12 10 
0z"/> 

</g> 

<g id="disabled" style="opacity:0.5" display="none"> 
</g> 

15 <g> 
</svg> 

skinButtonWindows.svg 

<?xml version="1.0"?> 
20 <svg xmlns:dsvg="http://corel.org/dsvg"> 
<g id="skinButton"> 

<g id="label" sty^'^ont-famil^Tahoma^strokemoneifont-size: 12;text- 
anchor:middle"> 

<text x="50" y="13"> </text> 

25 <dsvg:constraint scalelmmunity="true" hAlign="middle" 

vAlign="middle"/> 
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</g> 

<g id= H up" display="all" style="stroke-width:l"> 

<rect x="0" y="0" width="100" height="18" 
style="fill:rgb(230,230,230);stroke:none"/> 

5 <polyline points="0, 1 8 0,0 1 00,0" style="stroke:wbite;fill:none7> 

<polylinepoints="0,18 100,18 100,0" style="stroke:black;fill:none"/> 

<dsvg:constraint propertyName="stroke-width" 
scaleImmunity="true"/> 

</g> 

1 0 <g id="down" display="none" style="stroke-width: 1 "> 

<rect x="0" y="0" width="100" height="18" 
style="fill:rgb(230^30,230);stroke:none7> 

<polylinepoints="0,18 0,0 100,0" style="stroke:black;fill:none7> 

<polylinepoints="0,18 100,18 100,0"style="stroke:white;fiU:none7> 

15 <dsvg:constraint propertyName = "stroke-width" 

scaleImmunity="true"A> 

</g> 

<g id- 'hover" display="none" style="stroke-width:2"> 

<rect x="0" y="0" width="100" height="18" 
20 style="fil!:rgb(230,230,230);stroke:none7> 

<polyline points="0,18 0,0 100,0" styIe="stroke:white;fill:none"/> 

<polylinepoints="0,18 100,18 100,0" style="stroke:black;ffll:none*V> 

<rect x="l" y="l" width="98" height="16" 
style= n fill:none;stroke:#l 99DBF;stroke-width: 1 "> 

25 <dsvg:constraint propertyName="stroke-width" 

scaleImmunity="trae"/> 
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</rect> 

<dsvg: constraint propertyName=" stroke- width" 

scaleImmunity= ,, true M /> 
</g> 

<g id="disabled" display= M none w style="stroke-width:l;opacity:0.5 M > 

<rect x = "0" y="0" width="100 M height="18" 
style="fill:rgb(230,230^30);stroke:none H /> 

<polyline points="0,18 0,0 100,0" style="stroke:white;fill:none"/> 
<polylinepoints="0,18 100,18 100,0" style="stroke:black;fill:none"/> 
<dsvg: constraint prop ertyName=" stroke -width" 
scaleImmunity="true u /> 

</g> 

</g> 

</svg> 

skinCalendar.svg 

<?xml version="L0"?> 
<svg> 

<g id="skinCalendar"> 

< u s e id = "CalendarBackSkin" 
xlink:h^e^ n skinCalendar.svg#skinCalendarBack ,, x="0" y= M 0"/> 

<use id="DaysButtonsSkin" xlink:hre^"sldnCalendar.svg^skinDaysButtons" 
x="l" y="407> 

</g> 

<g id="skmCalendarBack n > 
<g id="up"> 
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<g id="calendarBack"> 

<path fill="#5D80D5" d="M243 1510 -14 -131 0 -18 13 149 0z7> 

<path fill="#F2F2F2" d="M244 291-244 0 0 -3 244 0 0 3z7> 

<path fill="#F2F2F2" d="M244 231-244 0 0 -3 244 0 0 3z7> 

5 <path fill="#F2F2F2" d="M244 341-244 0 0 -3 244 0 0 3z7> 

<text x="15" y="30" fill="#5D80D5" font-weight="normal" font-size="9" font- 
family="Verdana">S<text> 

<text x="48" y="30" fill="#5D80D5" font-weight="normal" font-size="9" font- 
family="Verdana">M</text> 

10 <text x="85" y="30" fill="#5D80D5" font-weight^'normal" font-size="9" font- 

family="Verdana">T</text> 

<text x="119" y="30" fill="#5D80D5" font-weight="normal" font-size="9" font- 
family="Verdana">W<text> 

<text x="157" y="30" fill="#5D80D5" font-weight="normal" font-size="9" font- 
15 family="Verdana">T</text> 

<text x="190" y="30" fill= tt #5D80D5" font-weight="normal" font-size="9" font- 
family=''Verdana">F<Aext> 

<text x="224" y="30" fill="#5D80D5" font-weight="normal" font-size="9" font- 
family="Verdana">S</text> 

20 <path fill="none" stroke="#666666" d="M0 1 81244 07> 

<!~<rect fill="none" x="9" y="8" width="287" height="2877>-> 

</ g > 

</ g > 

<g id="down"> 

25 <use id="backDown" xlink:href="#calendarBack" x="0" y="0"/> 
</g> 
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<g id="hover"> 

<use id="backHover" xlink:href="#calendarBack" x="0" y="07> 
<g> 

<gid="disabled"> 
<use id="backDisabled" xlink:href="#calendarBack" x="0" y="07> 

</g> 

<g id="label"> 

<text text-anchor="end" x="240" y="12" fill="#FFFFFF" font-weight="normar font- 
size^' 1 1" font-family="Verdana"> </text> 

</g> 

</g> 

<g id="skinDaysButtons"> 
<gid="up"> 

<rect height="33" width="35" stroke="none" fill=7aone7> 

<path fill="#E5FFFF" stroke="#0083C4" d="M31 291-31 0 0-29 31 

0 0 29z"/> 

</g> 

<g id="down"> 

<pathfiIl= ,, #EDAF0D ,, stroke="#0083C4"d="M31 291-31 00-2931 

0 0 29z7> 

</g> 

<g id="hover"> 

<path fill="#E5FFFF" stroke="#0083C4" stroke-width="2" d="M31 
291-31 0 0-29 31 0 0 29z"/> 

</g> 
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<g id="focusUp"> 

<path fill="#E5FFFF" stroke="#0083C4" d="M31 291-31 0 0 -29 31 

0 0 29z7> 

</g> 

5 <gid="disabledUp"> 

<pathfill= ,, #F7FFFF" stroke="#98B2E5" d="M31 291-31 0 0 -29 31 

0 0 29z7> 

</g> 

<gid="label"> 

10 <text text-anchor^'middle" x="20" y="23" fill="#666666" font-weight="normar font- 
size="10" font-family="Verdana"> </text> 

</g> 

</g> 

<g id="skinDaysButtonsNonPaid"> 
15 <gid="down"> 

<path filK'green" stroke="#0083C4" d="M31 291-31 0 0 -29 31 0 0 

29z"/> 

</g> 

</g> 

20 <g id="skinDaysButtonsHalfDayNonPaid"> 

<g id="down"> 

<path fill="blue" stroke="#0083C4" d="M31 291-31 0 0 -29 31 0 0 

29z*V> 

</g> 

25 <g> 

<g id="skinDaysButtonsHalfDayPaid"> 
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<g id="down"> 

<path fill="red n stroke="#0083C4" d="M31 291-31 0 0 -29 31 0 0 

29z'V> 

</g> 

</g> 

</svg> 



skinCheckboxJDefauItsvg 

<?xml version="1.0" standalone="no" ?> 

<svg> 

<g id="skinCheckbox"> 
<gid="labei"> 

<text x="15" y="10.5" style="font-weight:normal;font-size:12;font- 
family:Tahoma; fill:#000000;"> </text> 

</g> 

<g id=*'up" display="all"> 

<rect x="0" y="0" width="12" height="12" 
style="stroke:black;fill:white" /> 

</g> 

<g id="down" display="none"> 

<rect x="0" y="0" width="12" height=" 1 2" 
style="strOke:black;fill:white" /> 

<path d = "M 2 6 1 2 4 1 6.5 -8" 
style="fill:#FFFFFF;stroke:#000000;stroke-width: 1 " /> 

</g> 

<g id- "hover" display="none"> 
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<rect x="0" y="0" width="12" height="12" 
style="stroke:black;fill:white" /> 

</g> 

<g id="disabled" style="opacity:0.5" display="none"> 

5 <rect x="0" y="0" width="12" height="12" 

style="stroke:black;fill:white" l> 

</g> 

</g> 

</svg> 

10 

skinComboBox_Composite.svg 

<?xml version^" 1 .0"?> 

<svgxmlns:dsvg="http://corel.org/dsvg"> 

1 5 <g id="skinComboBox"> 

<use id = "TextBoxSkin" 
xlink:href="skinTextBox_ComboBox.svg#skinTextbox" x="0" y="0" t> 

<use id="ButtonSkin" xlink:bxef= ,, skinButton_ComboBox.svg#skiiiButton" 
x="200" y="0" /> 

20 <use id = "DropDownSkin" 

xliI)k:bJel^^kinListBox_Composite.svg#skiIlListBox ,, x="0" y="17" f> 

<gid="label"> 

<text id="skinComboBoxDefault_bodyText" x="0" y="-6" 

fill="black"Xtext> 

25 <dsvg:constraint scalelmmunity="true" hAlign="left" 

vAlign="bottom"/> 
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</g> 

</g> 

</svg> 

5 skinComboBox_Default.svg 

<?xml versions" 1.0"?> 
<svg> 

<g id="skinComboBox"> 

<gid=* , up n display= ,, all ,, > 

1 0 <g id="skinComboBox_label"> 

<text x="0" y="-5" style="fill:#000000;font- 
weight:normal;font-size:12;font-family:Tahoma"></text> 

</g> 

<g id="skinComboBox_body" style^"fill:none"> 

15 <rect x="0" y="0" width="200" height="17 M 

style="fill:#FFFFFF;stroke:#A3A3A3;stroke-width:l"> 

<rect x="200" y="0" width="17" height="17" 
style= ,, fill:#000000;stroke:#A3A3A3;stroke-width: l"/> 

<path d="M 205 5 1 6 0 1 -3 6 z" 
20 style="fill:#FFFFFF;stroke:#FFFFFF;stroke-width: l"/> 

<text id="skinComboBox_bodyText" x="5". y="13" 
style="fill:#676767;font-weight:normal;font-size: 1 2;font-family:Tahoma"> </text> 

</ g > 

<g id="skinComboBox_bodyCover"> 

25 <rect x="0" y="0" width="200" height="17" fill="none" 

stroke-'none" pointer-events- 'fill7> 
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</g> 

<g id="skinComboBox_dropDownButton"> 

<rect x="200" y="0" width="17" height="17" 
style="fill:#000000;stroke:#000000;stroke-width: 1 "/> 

5 <path d="M 205 5 1 6 0 1 -3 6 z" 

style="fill:#FFFFFF;stroke:#FFFFFF;stroke-width: 1 7> 

</g> 

</g> 

10 <g id="down" display="none"> 

<g id="skinComboBox_label"> 

<text x="0** y="-5" style= H fill:#000000;font- 
weight:nonnal;font-size: 12;font-family:Tahoma"> </text> 

</ g > 

15 <g id="skinComboBox_body" style="fill:none"> 

<rect x="0 n y="0" width="200" height="17" 
style="fill:#FFFFFF;stroke:#A3 A3A3;stroke-width:l "/> 

<rect x="200" y="0" width="17" height="17" 
style="fill:#000000;stroke:#A3A3A3;stroke-width: 1 "/> 

20 <path d="M 205 5 1 6 0 1 -3 6 z" 

style="fill:#FFFFFF;stroke:#FFFFFF;stroke-width: 1 "t> 

<text id="skinComboBox_bodyText" x="5" y="13" 
style="fin:#676767;font-weight:noraial;font-size:12;font-family:Tahoma^ 

<g> 

25 <g id="skinComboBox_bodyCover"> 
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<rect x="0" y="0" width="200" height="17" fill="none" 
stroke="none" pointer-events="fill"/> 

</g> 

<gid="skinComboBox_dropDownButton"> 

5 <rect x="200" y="0" width="17" height="17" 

style="fill:#199DBF;stroke:#199DBF;stroke-width:17> 

<path d="M 205 5 1 6 0 I -3 6 z" 
style="fill:#FFFFFF;stroke:#FFFFFF;stroke-width: 1 7> 

</g> 

10 </g> 

<g id="hover" display="none"> 

<g id="skinComboBox_label"> 

<text x="0" y="-5" style="fill:#000000;font- 
1 5 weight:normal;font-size: 12;font-family:Tahoma"> </text> 

</g> 

<g id="skinComboBox_body" style="fill:none"> 

<rect x="0" y="0" width="200" height="17" 
style="fill:#FFFFFF;stroke:#A3A3A3;stroke-width: 1 7> 

20 <rect x="200" y="0" width="17" height="17" 

style="fill:#000000;stroke:#A3A3A3;stroke-width: 1 7> 

<path d="M 205 5 1 6 0 1 -3 6 z" 
style="fill:#FFFFFF;stroke:#FFFFFF;stroke-width: 1 7> 

<text id="skinComboBox_bodyText" x="5" y="13" 
25 style="fill:#676767;font-weight:normal;font-size: 12;font-family:Tahoma"> <text> 

</g> 
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<g id="skinComboBoxJ)odyCover"> 

<rect fill="none" stroke="none n pointer-events="fiir x="0" 
y="0" width="200" height= M 17"/> 

</g> 

<g id="skinComboBox_dropDownButton M > 

<rect x="200" y="0" width=" 1 7" height=" 1 7" 
style= ,, fill:#199DBF;stroke:#199DBF;stroke-width:l M /> 

<path d="M 205 5 1 6 0 1 -3 6 z" 
style='Till:#FFFFFF;stroke:#FFFFFF;stroke-width: 1 7> 

</g> 

<Jg> 



<g id="skinComboBox_dropDownList n > 

<g id= n skinComboBox_dropDownList _top"> 

<line xl="0" yl="17" x2="0" y2="20" 
style="stroke:#000000;stroke-width: 1 " /> 

<line xl="217" yl="17" x2="217" y2="20" 
style="stroke:#000000;stroke-width:l " l> 

<rect x=" 1 H y=" 18" width="2 15" height="2 M 

style="fill:#FFFFFF7> 

</g> 

<gid="skinComboBox_dropDownList_middle"> 

<line xl-"0" yl="20" x2 = "0" y2 = "35" 
styIe="stroke:#000000;stroke-width: 1 " /> 

<line xl= M 217" yl="20" x2="217" y2="35" 
style="stroke:#000000;stroke-width: 1 " /> 
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<rect x='*r' y="20" width="215" height="14" 
style="fill:#FFFFFF;stroke:#FFFFFF;stroke-width: 1 " isback="true"/> 

</g> 

<gid="skinComboBox_dropDownList_bottom"> 

<line xl = "0" yl="35" x2="0" y2="38" 
style="stroke:#000000;stroke-width: 1 " l> 

<line xl="217" yl="35" x2="217" y2="38" 
style="stroke:#000000;stroke-width: 1 " t> 

<line xl="0" yl="38" x2="217" y2="38" 
style="stroke:#000000;stroke-width: 1 " t> 

<rect x="l" y="36" width="215" height="2" 

style="fill:#FFFFFF'7> 

</g> 

</g> 

</g> 

</svg> 

skinComboBoxGraphicsvg 

<?xml version="1.0"?> 
<svg> 

<g id^'skinComboBox'^ 

< u s e id = " TextBoxSkin" 
xlink:href="skinTextBox_ComboBox_Short.svg#skinTextbox" x="0" y="0" l> 

<use id="ButtonSkin" xlink:href^"skinButton_ComboBox.svg#skinButton" 
x="133" y="0" /> 
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<use id = "DropDownSkin" 
xlink:href^"skinListBox_CompositeG.svg#skinListBox ,f x="0" y="17" /> 

<g id="label"> 

<text id= w skinComboBoxDefault_bodyText M x= !, 0" y="-6" 

5 filW'black M ></text> 

<dsvg:constraint scalelmmunity="true" hAlign="Ieft" 

vAlign="bottom7> 

<lg> 

</g> 

io <svg> 

skinComboBox_Graphic2.svg 

<?xml version="1.0"?> 
<svg> 

15 

<g id="skinComboBox"> 

<use id = "TextBoxSkin" 

xliIlk:hre^ ^l skinTextBox_ComboBox_Sho^Lsvg#skinTextbox ,, x="0" y="0" > 

<use id^ButtonSkin" xlink:href^ M skinButton_ComboBox.svg#skinButton ,r 
20 x="133 ,, y= ,, 0"/> 

< u s e id = " DropDownSkin" 
xlink:href^ M skinListBox_ConipositeG2.svg#skinListBox" x="0" y= ,, 17 H /> 

<g id= M label"> 

<text id= M skinComboBoxDefault_bodyText" x= w 0" y="-6 M 

25 fill="black f, > <text> 
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<dsvg:constraint scalelmmunity="true" hAlign-'left" 

vAlign="bottom"/> 
</g> 

5 

</svg> 

skinContextMenu_Default.svg 

<?xml version="1.0"?> 
10 <svg xmlns:dsvg="http://corel.org/dsvg"> 
<g id="skinContextMenu"> 

<g id="skinContextMenu_top" display="all"> 

<linexl="0 M yl="17" x2="0" y2="20" style="stroke:#000000;stroke- 

width:l"/> 

15 <line xl="150" yl="17" x2="150" y2="20" 

style= M stroke:#000000;stroke-width:l" l> 

<line xl = M 0" y 1 = " 1 7 " x2 = "150" y2="17" 
style="stroke:#000000;stroke-width: 1 " t> 

<rectx="l" y="18" width="148" height="2" style="fill:#FFFFFF"/> 

20 </g> 

<g id^'skinContextMenujrniddle" display="all"> 

<linexl="0" yl="20" x2="0" y2=' , 35" style="stroke:#000000;stroke- 

width:l"/> 

<Hne xl = "150" yl="20 M x2= M 150" y2 = "35" 
25 style="stroke:#000000;stroke-width: 1 " t> 
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<rect x= M l" y="20" width=" 148" height="14" 
style="fill:#FFFFFF;stroke:#FFFFFF;stroke-width: 1 " isback="true"/> 

<text x="3" y="32" id="label"> 

<dsvg:constraint presen'eAspectRatio="vertical" hAlign-'left" 

5 vAlign="bottom'V> 

</text> 

</g> 

<g id- 'skinContextMenu_middle_hover" display="none"> 

<linexl="0"yl="20"x2="0* , y2="35"style="stroke:#000000;stroke- 

10 width.T'/> 

<line xl="150" yl = "20" x2="150" y2= ,, 35" 
style= n stroke:#000000;stroke-width: 1 " l> 

<rect x="l" y="20" width="148" height="14" 
style="fill:#CCCCCC;stroke:#FFFFFF;stroke-width: 1 " isback="true7> 

15 <text x="3" y="32" id="label"> 

^vgiconstraktpreserveAspectRatio^'vertical'' hAlign-'left" 

vAlign="bottom"/i» 

</text> 

</ g > 

20 <g id="skinContextMenu_iiuddle_selected" display="none"> 

<linexl="0"yl="20"x2="0 ,, y2="35 ,, style="stroke:#000000;stroke- 

width:l"/i> 

<line xl="150" yl = "20" x2 = "150" y2="35" 
style="stroke:#000000;stroke-width: 1 " l> 

25 <rect x="l" y="20" width="148" height="14" 

style="fill:#FFOOOO;stroke:#FFFFFF;stroke-width: 1 " isback="trae"/> 

<text x="3 M y="32" id="label"> 
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<dsvg:constraint preserveAspectRatio="vertical" hAlign="left" 

vAlign="bottom"/> 

</text> 

</g> 

5 <g id="skinContextMenu_bottom" display="all"> 

<linexl="0" yl="35" x2="0" y2="38 M style="stroke:#000000;stroke- 

width:l"/> 

<line xl = "150" yl = M 35" x2 = "150" y2= ,, 38" 
style="stroke:#000000;stroke-width: 1 " /> 

10 <line xl="0" yl="38" x2="150" y2 = "38" 

style="stroke:#000000;stroke-width:r /> 

<rectx=*'l" y="36" width="215" height="2" style="fill:#FFFFFF7> 

</g> 

<lg> 

15 </svg> 

skinContextMenu_Default2.svg 

<?xml version="1.0"?> 
<svg> 

20 <g id="skinContextMenu ,, > 

<g id="skinContextMenu_top" display="all"> 

<linexl="0" yl="17" x2="0" y2="20" style="stroke:#000000;stroke- 

width:l"/> 

<line xl="150" yl = "17" x2 = "150" y2="20" 
25 style="stroke:#O00000;stroke-width: 1 " /> 
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<line xl= M 0" yl="17" x2="150" y2="17" 
style="stroke:#000000;stroke-width: 1 " l> 

<rect x="l" y="18" width="148" height="2" style="fill:#FFFFFF7> 

</g> 

5 <g id="skinContextMenu_mi(idle" display="all"> 

<linexl="0" yl="20" x2="0" y2= ,, 35 ,, style="stroke;#000000;stroke- 

width:l"/> 

<line xl="150" yl="20" x2="150" y2="35" 
style="stroke:#000000;stroke-width: 1 " /> 

10 <rect x="l" y="20 ,, width="148" height="14" 

style="fill:#FFFFFF;stroke:#FFFFFF;stroke-width: 1 " isback="true"/> 

<text x= M 3" y="32" id="label"> </text> 

</g> 

<g id="skinContextMenu_xruddle_hover' , display="none"> 

1 5 <linexl="0" yl="20" x2="0" y2="35" style="stroke:#000000;stroke- 

width:l"/> 

<line xl="150" yl="20" x2="150" y2= ,, 35" 
style="stroke:#000000;stroke-width:l" l> 

<rect x="l" y="20" width="148" height="14" 
20 style="fill:#CCCCCC;stroke:#FFFFFF;stroke-width:r isback="true7> 

<text x="3" y="32" id="label"> </text> 

</g> 

<g id="skinContextMenu_middle_selected" display="none"> 

<line x 1="0" yl="20" x2="0" y2="35" style~"stroke:#000000;stroke- 

25 width: l"/> 

<line xl="l50" yl="20" x2="150" y2= M 35" 
style="stroke:#000000;stroke-width: 1" l> 
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<rect x= n l" y="20" width="148" height="14" 
sty^'Till^FFOOOOsstroke^FFFFFistroke-widfli: 1 " isback= n true"/> 

<text x="3" y="32" id="label"> </text> 

</g> 

<g id="skinContextMenu_bottom" display="aH"> 

<linexl="0" yl="35" x2="0" y2="38" style="sttoke:#000000;stroke- 

width:l"/> 

<line xl="150" yl="35" x2="150" y2="'38" 
style= ,, stroke:#000000;stroke-width:l" t> 

<line xl="0" yl="38 M x2="150" y2 = "38" 
style="stroke:#000000;stroke-width: 1 " /> 

<rectx="r y="36" widtb="215" height="2" style="fill:#FFFFFF"/> 

</ g > 

<l g > 

</svg> 

skinContextMenuGraphicsvg 

<?xml version="1.0"?> 
<svg> 

<g id="skinContextMenu"> 

<g id="skinContextMenu_top" display="air> 

<line xl="0" yl="0" x2="0" y2="3" style="stroke:#000000;stroke- 

width:l"/> 

<line xl="150" yl="0" x2 = "150" y2 = "3" 
style="stroke:#000000;stroke-width: 1" /> 
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<linexl="0" yl="0" x2="150" y2="0" style="stroke:#000000;stroke- 

width:l"/> 

<rect x='T* y=*T width="148" height="2" style="fill:#FFFFFF"/> 

</g> 

5 <g id="skinContextMenu_middle" display="all"> 

<line xl="0 M yl= M 3" x2= M 0 n y2="18" style="stroke:#000000;stroke- 

width:l"/> 

<line xl="150" yl="3" x2="150" y2="18" 
style="stroke:#000000;stroke-width:l" /> 

10 <rect x="l" y="3" width="148" height="14" 

style="fill:#FFFFFF;stroke:#FFFI^;stK)ke-width:l"isback="true"/> 

<text x="3" y="21" id="label"> </text> 
</g> 

<g id- 'skinContextMenu_middle_hover" display="none"> 

15 <linexl="0" yl="3" x2="0" y2="18" style="stroke:#000000;stroke- 

width:l"/> 

<line xl="150" yl="3 n x2="150" y2="18" 
style="stroke:#000000;stroke-width: 1 " /> 

<rect x="l" y="3" width="148" height"" 14" 
20 style="fill:#CCCCCC;stroke:#FFFFFF;stroke-width: 1 " isback="true"/> 

<text x="3" y="21" id="label"> </text> 

</g> 

<g id="skinContextMenu_middle_selected" display="none"> 

<line xl="0" yl="3" x2="0" y2="18" style="stroke:#000000;stroke- 

25 width:l" t> 

<liiie xl="150" yl = "3" x2 = "150" y2 = "18 M 
style="stroke:#000000;stroke-width: 1 " /> 
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<rect x="l". y="3" width=" 148" height="14" 
style="fiU:#FFOOOO;stroke:#FFFFFF;stroke-width: 1 " isback="true ,, /> 

<text x="3" y="2 1 " id="label ,, > </text> 

<g> 

<g id="skinContextMenu_bottom" display="all"> 

<linexl="0"yl= ,, 18 ,, x2= ,, 0 ,, y2="21"style="stroke:#000000;stroke- 

width:l"/> 

<line xl="150" yl="18" x2="150" y2="21" 
style="stroke:#000000;stroke-width: 1 " /> 

<line xl="0" yl="21" x2 = "150 ,, y2="21" 
style="stroke:#000000;stroke-width:l " l> 

<rect x=" 1 " y= ,, 19" width=" 148" height="2" style="fill:#FFFFFF"/i> 

</ g > 

</g> 

</svg> 



skinContextMenu_Graphic2.svg 

<?xml version="1.0"?> 
<svg> 

<g id- 'skinContextMenu"> 

<g id="skinContextMenu_top" display="air> 

<line xl="0" yl="0" x2="0" y2="3" style="stroke:#000000;stroke- 

width:l"/> 

<line xl = "133" yl="0" x2 = "133" y2 = "3" 
style="stroke:#000000;stroke-width: 1 " /> 
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<linexl="0" yl="0" x2="133" y2="0" style="stroke:#000000;stroke- 

width:l" /> 

<rectx="l" y="l" width="131" height="2" style="fill:#FFFFFF7> 

</g> 

5 <g id="skinContextMenu_middle" display="air> 

<line xl="0" yl="3" x2="0" y2="18" style="stroke:#000000;stroke- 

width:l" l> 

<line xl="133" yl="3" x2="133" y2="18" 
style="stroke:#000000;stroke-width: 1 " /> 

10 <rect x="l" y="3" width="131" height="14 M 

style="fill :#FFFFFF;stroke:#FFFFFF;stroke-width: 1 " isback="true"/> 

<text x="3" y="21" id="label"> <text> 

<g> 

<g id="skinContextMenu_middle_hover" display="none"> 

15 <line xl="0" yl="3" x2= n 0" y2="18 , ' style="stroke:#000000;stroke- 

width:l"/> 

<line xl="133" yl="3" x2 = "133" y2="18" 
style="stroke:#000000;stroke-width: 1" l> 

<rect x="l" y="3 M width="131" height=" 1 4" 
20 style="fill:#8888CC;stroke:#FFFFFF;stroke-width: 1 '* isback="true'7> 

<text x="3" y="2r id="label"> </text> 

</g> 

<g id="skinContextMenu_middle_selected" display="none"> 

<line xl="0" yl="3" x2="0" y2="18" style="stroke:#000000;stroke- 

25 width: 1" /> 

<line xl="133" yl = "3" x2 = "133" y2 = "18 ,, 
style="stroke:#000000;stroke-width: 1 " l> 
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<rect x = "l" y="3" width=" 1 3 1 " height="14" 
style="fill:#FF0000;stroke:#FFFFFF;stroke-width: 1 " isback= ,, tTue ,, /> 

<text x="3" y="21" id="label"> </text> 

</ g > 

<g id="skinContextMenu_bottom" display="aH"> 

<inex 1 ="0" yl =" 1 8" x2="0" y2="2 1 " style="stroke:#000000;stroke- 

width:l"/> 

<line xl = "133" yl = "18" x2 = ,, 133 l * y2="21" 
style="stroke:#000000;stroke-width:l" f> 

<line xl="0 H yl="21" x2="133" y2 = "2r' 
style="stroke:#000000;stroke-width: 1 " /> 

<rectx="l" y="19" width="131" height="2" style="fill:#FFFFFF'7> 

<Jg> 

<Jg> 

</svg> 

skinContextMenu_Graphic3.svg 

<?xml version="1.0"?> 
<svg> 

<g id="skinContextMenu"> 

<g id="skinContextMenu_top" display="all"> 

<line xl="0" yl="0" x2="0" y2= ,, 3" style="stroke:#000000;stroke- 

width:l"A> 
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<Hne xl="233" yl="0" x2="233" y2="3" 
style="stroke:#000000;stroke-width: 1" /> 

<linexl="0" yl="0" x2="233" y2="0" style="stroke:#000000;stroke- 

width:l"/> 

5 <rect x="l" y='T* width="231" height="2" style="fill:#FFFFFF"/> 

</g> 

<g id="skinContextMenu_middle" display="all"> 

<line xl="0" yl="3" x2="0" y2="18" style= M stroke:#000000;stroke- 

width:l"/> 

10 <line xl="233" yl = "3" x2 = "233" y2 = "18" 

style="stroke:#000000;stroke-width: 1 " /> 

<rect x="l" y="3" width="231" height="14" 
style="fill:#FFFFFF;stroke:#FFFFFF;stroke-width: 1 " isback="true"/> 

<textx="3" y="21" id="label"></text> 

15 </g> 

<g id="skinContextMenu_middle_hover" display="none"> 

<line xl="0" yl="3" x2="0" y2="18" style="stroke:#000000;stroke- 

width:l"/> 

<line xl="233" yl="3" x2 = "233" y2 = "18" 
20 style="stroke:#000000;stroke-width:r /> 

<rect x="l" y="3" width="231" height="14" 
style="fill:#8888CC;stroke:#FFFFFF;stroke-width: I " isback="true7> 

<text x="3" y="21" id="label"> </text> 

</g> 

25 <g id="skinContextMenu_middle_selected" display="none"> 

<linexl="0" yl="3" x2="0" y2="18" style="stroke:#000000;stroke- 

width:l"/> 
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<line xl="233" yl="3" x2 = ,, 233 n y2 = "18" 
style="stroke:#000000;stroke-width: 1 " /> 

<rect x="l" y="3" width="23 1 " h.eight-"14" 
sty1e="fill:#FF0000;stroke:#FFFFFF;stroke-width: 1 " isback="true'7> 

5 <text x="3" y="21 " id="label n ></text> 

</g> 

<g id= , 'skinContextMenu_bottom n display="all"> 

<linexl= H 0"yl="18" x2="0"y2="21" style="stroke:#000000;stroke- 

width:l"/> 

10 <line xl="233" y 1 = " 1 8 ** x2 = "233" y2 = "21" 

style="stroke:#000000;stroke-width: 1 " /> 

<line xl="0" y I = " 2 1 " x2 = "233" y2 = "2r' 
style="stroke:#000000;stroke- width: 1" f> 

<rectx="l" y="19" width="231" height="2" style="fill:#FFFFFF"/> 

15 <Jg> 
<g> 

<Jsvg> 

20 

skinContextMenu_ListBox.svg 

<?xml version=" 1 .0"?> 
<svgxmlns:dsvg="http://corel.org/dsvg"> 
<g id="skinContextMenu"> 
25 <g id="skinContextMenu_top" display="all"> 
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<line xl="0" yl="0" x2="0" y2="3" style="stroke:#000000;stroke- 

width:r/> 

<line xl="200" yl="0" x2="200" y2 = ,, 3" 
style= ,, stroke:#000000;stroke-width: 1 " /> 

5 <line xl="0" yl="0" x2= ,, 200" y2="0" style="stroke:#000000;stroke- 

width:l"A> 

<rect x="l" y="P width="198" height="2" styIe="fill:#FFFFFF"/> 

</ g > 

<g id="skinContextMenu_middle" display="aH"> 

10 <line xl="0" yl="3 B x2="0" y2= B 18 B style= B stroke:#000000;stroke- 

width.T'/> 

<line xl="200" yl="3" x2="200" y2="18" 
style="stroke:#000000;stroke-width:r l> 

<rect x = "l" y="3" width="198" height="l 4" 
15 style="fUl:#FFFFTF;stroke:^ isback="true B £> 

<text x="3" y="15" id="label"> 

<dsvg:constraint preserveAspectRatio="vertical" bAlign-'left" 

vAlign='*bottom"/> 

</text> 

20 <Jg> 

<g id="skinContextMenu_middle_hover" display= B none"> 

<linexl="0" yl="3" x2="0" y2="18" style= B stroke:#000000;stroke- 

width:l"A> 

<line xl= B 200 B yl="3" x2="200" y2="18" 
25 style="stroke:#000000;stroke-width:l"/> 

<rect x="l" y="3" width="198" height="14" 
style="fill:#CCCCCC;stroke:#FFFFFF;stroke-width:l" isback="true7> 
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<text x="3" y="15" id="label"> 

<dsvg:constraint preserveAspectRatio="vertical" hAlign="left" 

vAlign="bottom"/> 

</text> 

5 </g> 

<g id="skinContextMenu_middle_selected" display="none"> 

<line xl="0" yl="3" x2="0" y2="18" style="stroke:#000000;stroke- 

width:l"/> 

<line xl="200" yl = "3" x2="200" y2 = "18" 
1 0 style="stroke:#000000;stroke-width: 1 " /> 

<rect x="l" y="3" width="198" height="14" 
style="fill:#FF0000;stroke:#FFFFFF;stroke-width: 1 " isback="true"/> 

<textx="3" y="15" id="laber> 

<dsvg:constraint preserveAspectRatio="vertical" hAlign="left" 

15 vAlign="bottom7> 

</text> 

</g> 

<g id="skinContextMenu_bottom" display="all"> 

<line x 1 ="0" y 1 =" 1 8" x2="0" y2="2 1 " style="stroke:#000000;stroke- 

20 width: l"/> 

<line xl = "200" yl="18" x2 = "200" y2 = "2r' 
style="stroke:#000000;stroke-width: 1 " l> 

<line xl="0" yl="21" x2="200" y2="21" 
style="stroke:#000000;stroke-width: 1 " /> 

25 <rect x="l" y="19" width="198" height="2" style="fill:#FFFFFF'7> 

</g> . 
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</g> 

</svg> 

skmContextMenu_ListBox2.svg 

5 <?xmlversion="1.0"?> 

<svgxmlns:dsvg="http://corel.org/dsvg"> 
<g id="skinContextMenu"> 

<g id="skinContextMenu_top" display="aH"> 

<line xl="0" yl="0" x2="0" y2="3" style="stroke:#000000;stroke- 

10 width: l"/> 

<line xl="200" yl="0" x2 = "200" y2 = "3" 
style="stroke:#000000;stroke-width:l" /> 

<Unexl="0"yl="0"x2="200"y2= ,, 0 ,, style="stroke:#000000;stroke- 

width:l"/> 

15 <rect x="l" y="l" width="198" height="2" style="fill:#FFFFFF"/> 

<Vg> 

<g id="skinContextMenu_middle" display="all"> 

<line xl="0" yl="3" x2="0" y2="18" style= M stroke:#000000;stroke- 

width:l"/> 

20 <line xl="200" yl="3" x2 = "200" y2 = "18" 

style="stroke:#000000;stroke-width: 1 " l> 

<rect x="l" y="3" width="198" height="14" 
style="fill:#FFFFFF;stroke:#FFFFFF;stroke-width: 1 " isback="true"/> 

<text x="3" y="15" id="label"> 

25 <dsvg:constraint preserveAspectRatio="vertical" hAlign-'left" 

vAlign="bottom"/> 
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</text> 

</g> 

<g id="skinContextMenu_middle_hover" display="none"> 

<linexl="0" yl="3" x2="0" y2="18" style=**stroke:#000000;stroke- 

5 width: l"/> 

<line xl="200" yl="3" x2 = "200" y2 = "18" 
style="stroke:#000000;stroke-width: 1 " /> 

<rect x="l" y="3" width="198" height="14" 
style="fill:#CCCCCC;stroke:#FFFFFF;stroke-width: 1 " isback="true"/> 

1 0 <text x="3" y=" 1 5" id="label"> 

<dsvg:constraint preserveAspectRatio="vertical" hAlign-'left" 

vAlign="bottom"/> 

</text> 

</g> 

15 <g id="skinContextMenu_middle_selected" display="none"> 

<line xl="0" yl="3" x2="0" y2= ,, 18" style="stroke:#000000;stroke- 

width:l"/> 

<line xl = "200" yl="3" x2 = "200" y2 = "18" 
style="stroke:#000000;stroke-width: 1 " l> 

20 <rect x="l" y="3" width="198" height="14" 

style="fill:#FFOOOO;stroke:#FFFFFF;stroke-width:l" isback="true"/> 

<text x="3" y="15" id="laber> 

<dsvg:constraintpreserveAspectRatio= l, verticaI"hAlign= , 'left" 

vAlign="bottom"/> 
25 </text> 
</g> 
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<g id="skinContextMenu_bottom" display="all"> 

<linex 1="0" yl="18" x2="0" y2="21 " style= M stroke:#000000;stroke- 

width:l"/> 

<line xl="200" yl="18" x2="200" y2="21" 
style="stroke:#000000;stroke-width: 1 " l> 

<line xl = "0" y 1 = " 2 1 " x2="200" y2 = "21" 
style="stroke:#000000;stroke-width: 1" /> 

<rectx="l" y="\9" width="198" height="2" style="fill:#FFFFFF"/> 

</g> 

</g> 

</svg> 

skinContextMenuJListBoxG.svg 

<?xmlversion="1.0"?> 
<svg> 

<g id- 'skinContextMenu"> 

<g id="skinContextMenu_top" display="all"> 

<line xl="0" yl="0" x2="0" y2= , •3• , style="stroke:#000000;stroke- 

width:l"/> 

<line xl="150" yl="0" x2="150" y2="3" 
style="stroke:#000000;stroke-width: 1 " /> 

<linexl="0"yl="0 ,, x2= ,, 150"y2="0"style="stroke:#000000;stroke- 

width:l"/> 

<rect x="l" y="^ , width="148" height="2" style="fill:#FFFFFF"/> 

<g> 

<g id="skinContextMenu_middle" display="all"> 
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<line xl="0" yl="3" x2="0" y2="18" style="stroke:#000000;stroke- 

width: l"/> 

<line xi="150" yl="3" x2 = "150" y2 = "18" 
style="stroke:#000000;stroke-width: 1 " /> 

<rect x="l" y="3" width="148" height=" 14" 
style="fiU:#FFFFFF;stroke:#FFFFFF;stroke-width: 1 " isback="true"/> 

<text x="3" y="5" id="label"> </text> 

</g> 

<g id="skinContextMenu_middle_hover" display="none"> 

<line xl="0" yl="3" x2="0" y2="18" style="stroke:#000000;stroke- 

width:l"/> 

<line xl="150" yl="3 M x2 = "150" y2 = "18" 
style="stroke:#000000;stroke-width: 1" /> 

<rect x="\" y="3" width="148" height="14" 
style="fill:#CCCCCC;stroke:#FFFFFF;stroke-width: 1 " isback="true'7> 

<text x="3" y="5" id="label"> </text> 

</g> 

<g id="skinContextMenu_middle_selected" display="none"> 

<line xl="0" yl="3" x2="0" y2="18" style="stroke:#000000;stroke- 

width:l"^> 

<line xl="150" yl="3" x2 = "150" y2 = "18" 
style="stroke:#000000;stroke-width: 1 " /> 

<rect x="l" y="3" width="148" height=" 14" 
style="fill:#FFOOOO;stroke:#FFFFFF;stroke-width: 1" isback="true"/> 
<text x="3" y="5" id="label"> </text> 

</g> 

<g id="skinContextMenu_bottom" display="all"> 
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<line xl="0" yl="18" x2="0 n y2="21 " style="stroke:#000000;stroke- 

width:l"/> 

<line xl="150" yl="18" x2 = "150" y2="21" 
style="stroke:#000000;stroke-width: 1" /> 

5 <line xl="0" y 1 = " 2 1 " x2 = "150" y2= M 21" 

style="stroke:#000000;stroke-width: 1 " /> 

<rect x="l" y="19" width="215" height="2" style="fill:#FFFFFF"/> 

</g> 

</ g > 

10 </svg> 



skinContextMenu_ListView.svg 

<?xml versions" 1 .0"?> 
<svg> 

15 <g id="skinContextMenu"> 

<g id="skinContextMenu_top" display="all"> 

<line xl^'O" yl="0" x2="0" y2= ,, 3" style="stroke:#000000;stroke- 

width:l"/> 

<line xl = "200" yl-"0" x2 = "200" y2 = "3" 
20 style="stroke:#000000;stroke-width: 1 " l> 

<line xl="0" yl="0 M x2="200" y2= ,, 0" style="stroke:#000000;stroke- 

width:l"/> 

<rectx="l" y="18" width="198" height="2" style="fiU:#FFFFFF"/i> 

<Jg> 

25 <g id="skinContextMenu_middle M display="aH"> 
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<line xl="0" yl="3" x2="0" y2="18" style="stroke:#000000;stroke- 

width:l"/> 

<line xl = "200" yl="3" x2="200" y2="18" 
style="stroke:#000000;stroke-width: 1 " /> 

5 <rect x="l" y="3" width=" 1 98" height="14" 

style="fill:^FFFF;stroke:#FFFFFF;stroke-width:rMsback=^ 

<text x="3" y="15" id="laber> </text> 

</g> 

<g id="skinContextMenu_middle_hover" display="none"> 

10 <line xl^'O" yl="3" x2="0" y2="18" style="stroke:#000000;stroke- 

width:l"/> 

<line xl="200" yl^'3" x2 = "200" y2 = "18" 
style="stroke:#000000;stroke-width:l" l> 

<rect x= ,, l" y="3" width="198" height= M 14" 
1 5 style="fill:#CCCCCC;stroke:#FFFFFF;stroke-width: 1 " isback="true"/> 

<text x="3" y="15" id="label"> </text> 

</g> 

<g id="skinContextMenu_middle_selected" display="none"> 

<line xl="0" yl="3" x2="0" y2="18" style="stroke:#000000;stroke- 

20 width: l"/> 

<line xl="200" yl="3" x2="200" y2="18" 
style="stroke:#000000;stroke-width: 1 " l> 

<rect x = "l" y="3" width="198" height="14" 
style="fill:#FFOOOO;stroke:#FFFFFF;stroke-width: 1 " isback="true"/> 

25 <textx="3"y="15"id="labeP></text> 

<g> 

<g id="skinContextMenu_bottom" display="all"> 
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<line xl="0"yl="l 8" x2="0" y2="2 1 " style="stroke:#000000;stxoke- 

width:l'7> 

<line xl="200" yl="18" x2="200" y2="21" 
style="stroke:#000000;stroke-width: 1 " t> 

5 <line xl= M 0" y 1 = " 2 1 " x2 = "200" y2="21" 

style="stroke:#000000;stroke-width:l" l> 

<rect x="l" y="19" width="198" height="2" style= ,, fill:#FFFFFF"/> 

</g> 

</g> 

10 </svg> 



skinContextMenuListViewG.svg 

<?xml version="1.0"?> 
<svg> 

15 <g id="skinContextMenu"> 

<g id="skinContextMenu_top" display="all"> 

<line xl="0" yl="0" x2="0" y2="3" style="stroke:#000000;stroke- 

width:l"/> 

<line xl = "150" yl="0" x2 = "150" y2 = "3" 
20 style="stroke:#000000;stroke-width:l"/> 

<linexl="0" yl="0" x2="l 50" y2="0" style="stroke:#000000;stroke- 

widthrl" l> 

<rect x="l u y="l" width="148" height="2" style="fiU:#FFFFFF"y^ 

</g> 

25 <g id="skinContextMenu_middle" display="all"> 



-126- 



CA 02414378 2002-12-09 

<linexl="0" yl="3" x2="0" y2="18" styl<y="stroke:#000000;stroke- 

width:l"/> 

<line xl="150" yl = "3 M x2="150" y2 = "18" 
style="stroke:#000000;stroke-Avidth:l"/> 

5 <rect x-"l" y="3" width="148" height="14" 

style="fill:#FFFFFF;stroke:#FFFFFF;stroke-width:l" isback="true"/> 

<text x="3" y="5" id="label"> </text> 

</g> 

<g id="skinContextMenu_middle_hover" display="none"> 

10 <line xl="0" yl="3" x2="0" y2="l 8" style="stroke:#000000;stroke- 

width:l" l> 

<line xl = "150" yl="3" x2 = "150" y2 = "18" 
style="stroke:#000000;stroke-width:l" /> 

<rect x="l" y="3" width="148" height="14" 
15 style="fill:#CCCCCC;stroke:#FFFFFF;stroke-width:l' , isback= ,, true"/> 

<text x="3" y="5" id="label"> </text> 

<lg> 

<g id="skinContextMenu_middle_selected" display="none"> 

<line xl="0" yl="3" x2="0" y2="18" style="stroke:#000000;stroke- 

20 width:l"/> 

<line xl="150" yl="3" x2="150" y2 = "18" 
style="stroke:#000000;stroke-width: 1 " l> 

<rect x="l" y="3" width="148" height="14" 
style="fill:#FF0000;stroke:#FFFFFF;stroke-width:^ , isback="true7> 

25 <text x="3" y="5" id= M label"> </text> 

</g> 

<g id="skinContextMenu_bottom" display="all"> 
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<linexl="0" yl="18" x2="0" y2="21" style="stroke:#000000;stroke- 

width:l" /> 

<line xl="150" y 1 = " 1 8 " x2="150" y2="21" 
style="stroke:#000000;stroke-width: 1 " f> 

5 <line xl="0" yl = "21" x2 = "150" y2 = "21" 

style="stroke:#000000;stroke-width: 1" t> 

<rect x=" 1 " y=" 1 9" width- '2 15" height- '2" style="fill:#FFFFFF"/> 

<jg> 

</g> 

10 </svg> 

skinContextMenu_vp.svg 

<?xml version="1.0"?> 
<svg> 

15 <g id="skinContextMenu"> 

<g id="skinContextMenu_top" display="all"> 

<linexl="0"yl="17 ,, x2="0 ,, y2="20"style="stroke:#000000;stroke- 

width:l"/> 

<line xl="150" y\ = n \l" x2 = "150" y2 = "20" 
20 style="stroke:#000000;stroke-width: 1 " l> 

<line xl="0" yl="17" x2 = "150" y2 = "17" 
style="stroke:#000000;stroke-width: 1" /> 

<rect x="l" y="18" width="148" height="2" style="fill:#FFFFFF"A> 

</g> 

25 <g id="skinContextMenu_middle" display="all"> 
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<linexl="0"yl="20"x2="0"y2="35"style="stroke:#000000;stroke- 

width:l"/> 

<line xl="150" yl = "20" x2 = "150" y2="35 w 
style="stroke:#000000;stroke-width: 1 " /> 

5 <rect x="l" y="20" width="148" height-"14" 

style="fill:#FFFFFF;stroke:#FFFFFF;stroke-width: 1 " isback="true"/> 

<text x="3" y="32" id="laber'> </text> 

</g> 

<g id="skinContextMenu_middle_hover" display="none"> 

10 <linexl="0"yl="20" x2="0" y2="35" style="stroke:#000000;stroke- 

width:l"/> 

<line xl="150" yl = "20" x2="150" y2="35" 
style="stroke:#000000;stroke-width: 1" t> 

<rect x="l" y="20" width=" 148" height="14" 
1 5 style="fill:#CCCCCC;stroke:#FFFFFF;stroke-width: 1 " isback="trae"/> 

<text x="3" y="32" id="label"> </text> 

</g> 

<g id="skinContextMenu_raiddle_selected" display="none"> 

<linexl="0 ,, yl= ,, 20"x2="0"y2="35"style="stroke:#000000;stroke- 

20 width: I" /> 

<line xl = "150" yl="20" x2 = "150" y2 = "35" 
style="stroke:#000000;stroke-width: 1 " /> 

<rect x="l" y="20" width="148" height="14" 
style="fill:#FF0000;stroke:#FFFFFF;stroke-width: 1" isback="trae"/> 

25 <text x="3" y="32" id="label"> </text> 

</g> 

<g id="skinContextMenu_bottom" display="all"> 
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<line xl="0" yl="35" x2="0" y2="38" style="stroke:#000000;stroke- 

width:l"/> 

<line xl="150" yl="35" x2 = "150" y2="38" 
style="stroke:#000000;stroke-width: 1 " l> 

5 <line xl="0" yl="38" x2 = "150" y2="38" 

style="stroke:#000000;stroke-width: 1 " /> 

<rect x="l" y="36" width="215" height="2" style="fill:#FFFFFF7> 

</g> 

<y g > 

10 </svg> 



skinListbox_Composite.svg 

<?xml version="1.0"?> 
<svg> 

15 <g id="skinListBox"> 

<use id = "MenuSkin" 

xlink:href="skinContextMenu_ListBox.svg#skinContextMenu" x="0" y="0" /> 

< u s e id = " ScrollSkin" 

xlink:href="skinScrollBar_ListBox.svg#skinScrollBarSmall"x= M 0" y="0"/> 

20 <g id="label"> 

<text id="skinListBox_label" x="0" y="-6" fill="black"> </text> 

<Jg> 

<g> 

</svg> 

25 

skinListboxCompositeG.svg 
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<?xmlversion="l,0"?> 
<svg> 

<g id="skinListBox"> 

<use id = "MenuSkin" 

5 xliIlk:h^e^"skinContextMenu_G^aphic.svg#skinContextMenu ,, x="0" y="0" l> 

<use id = "ScrollSkin" 

xlillk:hre^^kinSc^olBa^_ListBox.svg#skinSc^ollBarSmaU , ' x="0" y="0"/> 

<g id="label"> 

<text id^'skinListBoxJabel" x="0" y="-6" fill="black"> <text> 

10 </g> 
</g> 

</svg> 

skinListbox_CompositeG2.svg 
15 <?xmlversion="1.0"?> 

<svg> 

<g id="skinListBox"> 

< u s e id = "MenuSkin" 
20 xlink:h^ef= ,, sldnContextMenu_G^aphic2.svg#skinContex1Menu ,, x="0" y="0" t> 

< u s e id = " ScrollSkin" 
xliIlk:href^ ,, skinSc^olBar_ListBox.svg#skinScrollBarSmall ,, x="0" y="0"/> 

<g id="laber> 

<text id="skinListBox_label" x="0" y="-6" fill=*'black"> </text> 

25 </g> 
</g> 
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<SVg> 

skinListbox_CompositeG3.svg 

<?xml version-" 1.0"?> 
<svg> 

<g id="skinListBox"> 

<use id = " Men u Skin 

xlink:hre^"sldnContextMenu_Graphic3.svg#skinContextMenu" x="0" y="0 w /> 

<use id = M ScrollSkin 

xlink:href^"skinScrollBa^ x="0" y= M 07> 

<g id="label"> 

<text id="skinListBoxJabel" x="0" y="-6" fill="black"> </text> 

<Jg> 

</g> 

</svg> 

skinListbox_Defaultsvg 

<?xml version-" 1 .0"?> 
<svg xmlns:dsvg="http://corel.org/dsvg" > 
<g id="skinButton"> 
<gid="label M > 
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<text x ="50" y=" 13" style="font-family:Tahoma';stroke:none;font- 
size: 12;text-anchor:middle"> </text> 

</g> 

<g id="up" display="aU" styie="stroke-width:l"> 

5 <rect x="0" y="0" width="17" height="17" 

style="fill:#000000;stroke:#A3A3A37> 

<path d="M 5 5 1 6 0 1 -3 6 z" style="fill:#FFFFFF;stroke:#FFFFFF"/> 

<dsvg:constraint preserveAspectRatio="vertical" hAlign="right"> 

</g> 

1 0 <g id="down" display="none"> 

<rect x="0" y="0" width="17" height="17" 
style="fill:#199DBF;stroke:#A3A3A37> 

<path d="M 5 5 1 6 0 1 -3 6 z" style="fill:#FFFFFF;stroke:#FFFFFF"/> 

<dsvg:constraint preserveAspectRatio="vertical" hAlign="right"/> 

15 </g> 

<g id="hover" display="none"> 

<rect x="0" y="0" width="17" height="17" 
style="fill:#199DBF;stroke:#A3A3A3"/> 

<path d="M 5 5 1 6 0 1 -3 6 z" style="fill:#FFFFFF;stroke:#FFFFFF"^> 

20 <dsvg:constraint preserveAspectRatio="verticaI" hAlign="right"/> 

</g> 

</g> 

</svg> 

25 skinListbox_jShort.svg 
<?xml version="1.0"?> 
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<svg> 

<g id="skinListBox*'> 

<use id = "TextBoxSkin" 

xlink:href="skinTextBox_ListBox_Short.svg#skinTextbox" x="0" y= M 0*' l> 

<use id="ButtonSkin" xlM:href="skinButton_ListBox.svg#skinButton ,, 
x="100" y="0" /> 

<use id = "DropDownSkin" 
xlink:href="skinListBox_Short.svg#skinDropDown" x="0" y="0" l> 

<gid="label"> 

<text id="skinListBoxDefeult_bodyText" x="0" y="-6" fill="black"> 

</text> 

</g> 

<J g > 

<g id- 'skinDropDown"> 

<g id="skinDropDown_top"> 

<Unexl="0"yl="17 ,, x2="0"y2= ,, 20"style="stroke:#000000;stroke- 

width:l"/> 

<line xl-"U7" yl="17" x2="117" y2 = "20" 
style="stroke:#000000;stroke-width:l" l> 

<rect x="l" y="18" width="l 15" height="2" style="£ill:#FFFFFF7> 

</g> 

<g id="skinDropDown_middle"> 

<linexl="0" yl="20" x2="0" y2="35" style="stroke:#000000;stroke- 

width:l"/> 
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<line xl = "117" yl="20" x2="117" y2="35" 
style="stroke:#000000;stroke-width: 1 " /> 

<rect x="l" y="20" width="115" height="14 H 
style="fin:#FFFFFF;stroke:#FFFFFF;stroke-width:l" isback= ,, true"/> 

<text x="3" y="32" id="laber'> </text> 

</g> 

<g id="skinDropDown_middle_hover" display="none"> 

<linexl="0" yl="20" x2="0" y2="35" style="stroke:#000000;stioke- 

width:l"/> 

<line xl="117" yl="20" x2="117 M y2= tt 35" 
style="stroke:#000000;stroke-width: 1" l> 

<rect x="l" y="20" width="ll5 H height= M 14" 
style="fill:#CCCCCC;stroke:#FFFFFF;stroke-width: 1" isback="true M /> 

<text x="3 " y="32" id="label"> </text> 

</g> 

<g id- 'skinDropDown_bottom"> 

<line x 1="0" yl="35" x2="0" y2="38" style="stroke:#000000;stroke- 

width:l"/> 

<line xl="117" yl="35" x2«"117" y2 = "38" 
style="stroke:#000000;stroke-width:l " l> 

<line xl= M 0" yl="38" x2 = "117" y2="38" 
style="stroke:#000000;stroke- width: 1" l> 

<rect x="l" y="36" width="l 15" height="2" style="fill:#FFFFFF'7> 

</g> 

</g> 

<Vsvg> 
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skinListView_Composite.svg 

<?xmlversion="1.0"?> 
<svg> 

<g id="skinListView"> 

<use id = "MenuSkin 

xli^k:href= ll skinContextMenu_ListBox.svg#skinContextMenu ,, x- '0" y="0" l> 

<use id = "ScrollSkin 

xlink:href="skinScrollBar_ListBox.svg#skinScrollBarSmall" x="0" y="0"/> 

<g id="label"> 

<text id="skinListBox_label" x="0" y="-6 M fill="black"> </text> 

</g> 

</g> 

</svg> 

skinListView_CompositeG.sVg 

<?xml version="1.0"?> 
<svg> 

<g id="skinListView"> 

<use id = "MenuSkin 

xlink:href= ,, sldnContextMenu_Graphic.svg#skinContextMenu ,, x="0" y="0" /> 

<use id="ScrollSkin 
xliIlk:href= , *skinSc^ollBa^_ListBox.svg#skinSc^ollBarSmall ,, x="0" y="07> 

<gid="label"> 

<text id="skinListBox_label" x="0" y="-6" fill="black"> </text> 

</g> 

</g> 
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</svg> 

skinRadioButtonDefaultsvg 

<?xml version="1.0"?> 
5 <svg> 

<g id="skinRadioButton"> 
<gid="laber> 

<text x="16" y="5" style="font-size:12;fffl:black"> </text> 

</g> 

10 <g id="up" display="all"> 

<circle cx="5" y="5" r="7" style="stroke:black;fill:wbite M l> 

<g> 

<g id- 'down" display="none"> 

<circle cx="5" y="5" i="7" style="stroke:black;fill:white" l> 
15 <circle cx= M 5" y="5" r="4" sty!e="stroke:black;fill:black" f> 

</g> 

<g id- Trover" display="none"> 

<circle cx="5" y="5" r="7" style="stroke:black;fill:wbite" /> 

<J g > 

20 <g id="disabled" style="opacity:0.5" display="none"> 

<circle cx="5" y="5" r="7" style="stroke:black;fdl:white" /> 

</g> 

<g> 

</svg> 

25 
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skinScrolIBar_Default.svg 

<?xmlversion="1.0"?> 
<svg> 

<g id="skinScrollBar"> 

<use id="SliderSkin" xlink:href= ,, skinScrolIBa^_Default.svg#SUderSkin ,, 

x =»0" y="0"/> 

<use id = "ButtonLeftSkin" 
xlink:href^^kinScrolBar_Default.svg#ButtonLeftSkin'' x='*0" y="07> 

<use id = "ButtonRightSkin" 
xlink:href= ,, skinScrollBar_Defaultsvg#ButtonRightSkin" x="0 M y="0"/> 

<g id="comer"> 

<rect fill="rgb(212 208 200)" x="0" y="0" width="16" height="16" 

t> 

<Jg> 

</g> 

<g id="ButtonLeftSkin"> 

<g id="up" fill='*none" stroke-linecap-'square" shape- 
rendering="optimizeSpeed" display="all"> 

<rect fill="rgb(212 208 200)" width="16" height="16" l> 

<linexl="15" yl="0" x2="15" y2="15" style="stroke:#404040"/> 

<linexl="0" yl= M 15" x2="15" y2="15" style="stroke:#404040"£> 

<linexl="l" yl="l" x2="13" y2="l" style="stroke:#FFFFFF7> 

<line xl="l" yl= M r x2="l" y2="13 B style="stroke:#FFFFFF7> 

<line xl="r yl="14" x2="14" y2="14" style="stroke:#8080807> 

<line xl="14" yl="l" x2="14" y2="14" style="stroke:#808080"/> 

<path fill="black" d="M9.5 5.51-3 313 3z" t> 
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</g> 

<g id="down" fill="none" stroke-linecap="square" shape- 
rendering="optimizeSpeed" display="none"> 

<rect fill="rgb(212 208 200)" width="16" height="16" t> 

5 <rect filH'none" style="stroke:#808080" width="16" height="167> 

<path fill="black" d="M10.5 6.51-3 313 3z" !> 

</ g > 

<fg> 

<gid="SliderSkin"> 
10 <g id="up w dispU>-"all"> 

<g id- 'body"> 

<rect id="SliderSkinBar" fm="#E6E6E6 n x="0" y= M 0" 

width="400" height="16"> 

</rect> 

15 <Jg> 

<g id="SliderSkinThumb"> 

<rect id="sliderThumbBar" style="fill:rgb(212 208 
200);stroke:#000000;stroke-width:0" x="0" y= ,, 0" width="400" height="167> 

<line xl= B 0 n x2="400" yl="15" y2="15" 

20 style="stroke:#4040407> 

<line xl="l" x2="398" yl="l" y2="l" 

style^'stroketfFFFFFF"^ 

</g> 

<pattern id = "barfill" width="2" height = "2" 
25 pattemUnits- 'userSpaceOnUse" shape-rendering="optimizeSpeed ,, > 

<rectx="0" y="0" width="2" height="2" fiU="white"/> 
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<rect x="0" y="0" width="l" height="l M fill="rgb(212 208 
<rect x="l" y="l" width="l" height= ,, l" fill="rgb(212 208 
</pattern> 

</g> 

<gid="mask"> 

<rect id="sliderMask" x="0" y="0" width="400" height^'ie" 

10 opacity="07i> 

</g> 

</g> 

<g id="ButtonRightSkin"> 

<g id="up" fill="none" stroke-linecap="square" shape- 
15 rendering="optimizeSpeed" display="all"> 

<rect fill="rgb(212 208 200)" width="16" height="16" l> 

<linexl="15" yl="0" x2="15" y2="15" style="stroke:#404040'7> 

<line xl="0" yl="15" x2="15" y2="15" style="stroke:#4040407> 

<line xl="l" yl='T' x2="13" y2="l" style^"stroke:#FFFFFF"/> 

20 <line xl="l" yl^'T' x2="l" y2="13" style="stroke:#FFFFFF"/> 

<linexl="l" yl="14" x2="14" y2="14" style="stroke:#8080807> 

<line xl="14" yl="l" x2="14" y2="14" style^'stroke^SOSOSO'V^ 

<path fill="black" d="M6.5 5.513 31-3 3z" t> 

<lg> 

25 <g id="down" fill="none" stroke-linecap="square" shape- 

rendering="optimizeSpeed" display="none"> 
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<rect fill="rgb(212 208 200)" width="16" height="16" l> 

<rect fill="none" style="stroke:#808080" width="16" height="167> 

<path fill="black" d="M7.5 6.513 31-3 3z" l> 

<Jg> 

5 </g> 



<g id="skinScrollBarSmall"> 

10 <use id = " SliderSkin" 

xlink:h^ef= ,, skinSc^ollBa^_Default.svg#Slide^SkinSmall' , x="0" y="0"/> 

<use id = "ButtonLeftSkin" 
xlink:hjef="skinScrolBar_Default.svg^uttonLeftSkinSmair x="0" y="0"A> 

<use id = "ButtonRightSkin" 
1 5 xhnk:bje5="skinScrollBar_Default.svg#ButtonRightSkinSmair x="0" y="07> 

<g id="corner"> 

<rect x="0" y="0" width="10" height="10" 
stjie="fill:#FFFFFF;stroke:#000000"/> 

<Jg> 

20 </g> 

<g id="ButtonLeftSkinSmall"> 
<g id="up" display="all"> 

<rect x="l" y="l" width="10" height="10" style="fill- 

mle:evenodd;clip-mle:evenodd;fin:#FFFFFF;stroke:#B3B3B3;stroke-width:1.0001;stroke- 
25 miterlimit:2.6131;7> 
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<rect x="0" y="0" width= M 10" height="10" 
style="ffll:#FFFFFF;stroke:#000000*V> 

<text x ="5" y="5" style="font-family:Tahoma';stroke:iione;font- 
size: 12;text-anchor:middle"> </text> 

5 <path d = "M 8 2 1 -6 3 1 6 3 z" 

sty^-'fill^OOOOOistroke^FFOOOOistroke-widthiO"/^ 

</g> 

<g id="down" display="none"> 

<rect x="l" y="l" width="10" heigbt="10" style="fill- 
10 rale:evenodd;clip-rule:evenodd;fill:#FFFFFF;stroke:#B3B3B3;stroke-width:1.0001;stroke- 
miterlimit:2.6131;7> 

<rect x="l" y="i H width="10" height="10" 
style="fill:#FFFFFF;stroke:#000000"/> 

<text x ="5" y="5" style="font-family:Tahoma , ;strDke:none;font- 
1 5 size: 1 2;text-anchor:middle"> </text> 

<path d="M 9 3 1 -6 3 1 6 3 z" 
style="fill:#FF0000;stroke:#FF0000;stroke-width:07> 

</g> 

</g> 

20 <g id="SliderSkinSmair> 

<g id="up" display="all"> 

<rect id^'SkmSliderSmallBorder" x="0" y="0" width="200" 
height="10" opacity="0'7> 

<gid="body"> 

25 <rectid="SkinSliderSmallBase" style="fill-rule:evenodd;clip- 

rule:evenodd;fill:#FFFFFF;stroke:#B3B3B3;stroke-width: 1 .0001 ;stroke-miterlimit:2.61 3 1 ;" 
x="l" y="l" width="444" height="10'7> 
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<rect id = "SliderSkinSmal]Bar" 
style="fill:#FFFFFF;stroke:#000000" x="0" y="0" width="444" height="107> 

</g> 

<g id="SliderSkinSmallThumb"> 

<rect i d = " s 1 i d e r T h u m b B a r " 
style="ffll:#B3B3B3^troke:#000000;stroke-width:0" x="0" y="0" width="10" haght^'lC/i* 

</g> 

<g id="tickMajor" display="none"> 

<text x="0" y="ll" id="tickLabelMajor M 
xml:space="preserve" style="font-face: Arial;font-size:8;fill:black;stroke: 1 ;text- 
anchor:middle"x/text> 

<Jg> 

</ g > 

<g id="mask" > 

<rect id="stiderMask" x="" y="0" width="444" height="18'' 

opacity="07> 

<Jg> 

</g> 

<g id="ButtonRightSkinSmall"> 

<g id="up" display="aU"> 

<rect x="l" y="l" width="10" height="10" style="fill- 
rule:evenodd;clip-mle:evenodd;ffll:^ 
miterlimit:2.6131;7> 

<rect x="0" y="0" width="10" height="10" 
style="fm:#FFFFFF;stroke:#0000007> 

<text x ="5" y="5" style="font-family:Tahoma';stroke:none;font- 
size: l2;text-anchor:middle"> <text> 
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<path d="M 2 2 1 6 3 1 -6 3 2" 
style="fill:#000000;stroke:#FF0000;stroke-width:0"/> 

</g> 

<g id- 'down" display="none"> 

<rect x="l" y="l" width="10" height="10" style="ffll- 
mle:evenodd;clip-rule:evenodd;ffll:#FFFFFF;stroke:#B3B3B3;stroke-widto 1 .000 1 jstroke- 
miterlimit:2.6131;"/> 

<rect x="l" y="l" width="10" height=" 1 0" 
style="fill:#FFFFFF;stroke:#000000"/> 

<text x ="5" y="5" style="font-family:Tahoma';stroke:none;font- 
size:12;text-anchor:middle"> </text> 

<path d="M 3 3 1 6 3 1 -6 3 z" 
style="fill:#FF0000;stroke:#FF0000;stroke-width:0"/> 

</ g > 
</gx/svg> 



skinScrollBarJListBox.svg 

<?xml version=" 1 .0"?> 
<svg> 

<g id="skinScrollBarSmall"> 

<use i d = "SliderSkin" 

xliI±:h^e^"sldnSc^ollBa^_Default.svg#SliderSkinSmall ,, x="0" y="0"/> 

<use id = "ButtonLeftSkin" 
xlink:href="skinScrollBar_Default.svg#ButtonI^ftSldnSmali" x="0" y="0"/> 

<use id = "ButtonRightSkin" 
xUnk:href="skinScrollBar_Default.sv^ButtonRightSkinSmair x="0" y="0"/> 

<g id="comer"> 
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<rect x="0" y="0" width="10" height="10" 
style="fill:#FFFFFF;stroke:#000000"display="none"/> 

</g> 

<lg> 

5 <g id="ButtonLeftSkinSmall"> 

<gid="up"display="air> 

<rect x="l" y="l" width="10" height="10" style="fill- 
mle:evenodd;clip-nile:evenodd;fill:#FTTFFF;stroke:#B3B3B3;stroke-width:1.0 
miterlimit:2.6131;7> 

10 <rect x="0" y="0" width="10" height="10" 

style="fill:#FFFFFF;stroke:#000000"/> 

<text x ="5" y="5" style="font-family:Tahoma';stroke:none;font- 
size: 1 2;text-anchor:middle"> </text> 

<path d = "M 8 2 1 -6 3 1 6 3 2" 
15 style="fill:#000000;stroke:#FF0000;stroke-width:0"/> 

<g id="down" display="none"> 

<rect x="l" y="l" width="10" height="10" style="fill- 
rule:evenodd;cUp-nile:evenodd;fill:#FFFFFF;stroke:#B3B3B3;stroke-width: 1 .0001 ;stroke- 
20 miterlimit:2.6131;'7> 

<rect x="l" y="l" width="10" height="10" 
style="fill:#FFFFFF;stroke:#000000"/> 

<text x ="5" y="5" style="font-family:'Tahoma , ;stroke:none;font- 
size: 12;text-anchor:middle"> </text> 

25 <path d = "M 9 3 1 -6 3 1 6 3 z" 

style='Till:#FF0000;stroke:#FF0000;stroke-width:0"/> 

</g> 
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</g> 

<g id="SliderSkinSmall"> 

<g id="up M display="all"> 

<rect id="SkinSliderSmallBorder" x="0" y="0" width="200" 
5 height= M 10"opacity="07> 

<g id="body"> 

<rect id="SkinSliderSmallBase" style="fill-rule:eveaodd;clip- 
rale:evenodd;ffll:#FFFFFF;stroke:#B3B3B3;sto^ 
x= ,, l" y="r width="444" height="107> 

10 <rect id = " Slider SkinSmallBar" 

style="fill:#FFFFFF;stroke:#000000" x="0" y="0" width= ,, 444" height="107> 

<jg> 

<g id="SliderSkinSmallThumb"> 

<rect id = " sliderThumbBar" 
1 5 style="fill:#B3B3B3;stroke:#000000;stroke-width:0" x="0" y="0" width=" 1 0" height=" 10"/> 

</g> 

<g id- 'tickMajor" display="none"> 

<text x="0" y=" 11" id= M tickLabelMajor" 
xml:space= M preserve" style="font-face:Arial;font-si2e:8;fill:black;stroke:l;text- 
20 anchor:middle"x/text> 

<Jg> 

<Jg> 

<g id="mask" > 

<rect id="sliderMask" x="" y="0" width="444" height="18" 

25 opacity="07> 

<Jg> 
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</g> 

<g id="ButtonRightSkinSmall"> 

<gid="up"display="all"> 

<rect x="l" y="l" width="10" height="10" style="fill- 
5 rule:evenodd;clip-ruIe:evenodd;fill:#FFFFFF;stroke:#B3B3B3 ;stroke-width: 1 .000 1 ;stroke- 
miterlimit:2.6131;7> 

<rect x="0" y="0" width="10 B height="10" 
style="fill:#FFFFFF;stroke:#000000"> 

<text x ="5" y="5" style="font-family:Tahoma';stroke:none;font- 
10 size:12;text-anchor:middle"></text> 

<path d="M 2 2 1 6 3 1 -6 3 z" 
style="fiU:#000000;stroke:#FF0000;stroke-width:07> 

</ g > 

<g id="down" display^'none'^ 

15 <rect x="l" y="l" width="10" height="10" style="fill- 

rule:evenodd;clip-mle:evenodd;fill:#FFFF^^ 
miterlimit:2.6131;"/> 

<rect x="l" y="l" width="10" height=" 1 0" 
style="fill:#FFFFFF;stroke:#000000"> 

20 <text x ="5" y="5" style^'font-familyj'Tahoma'jstrokernon^font- 

size: 1 2;text-anchor:middle"> </text> 

<path d = "M . 3 3 1 6 3 1 -6 3 z" 
style="fiU:#FF0000;stroke:#FF0000;sttoke-width:07> 

</g> 

25 </gx/svg> 

skinScrollBar_ListView.svg 
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<?xml version="1.0"?> 
<svg> 

<g id="skinScrollBarSmaH"> 

<use i d = " S 1 i d e r S k i n " 

5 xlink:href="skinScrollBar_Default.svg#SUderSkinSmall" x="0" y="07> 

<use id = "ButtonLeftSkin" 
xlink:h^e^' , skinSc^ollBar_De^ault.svg#ButtonLeftSkinSmall ,, x="0" y="07> 

<use id = "ButtonRightSkin" 
xUnk:href= ,, skinScroUBar_Default.svg#ButtonRightSkinSmall" x="0" y="07> 

10 <g id="corner"> 

<rect x="0" y="0" width="10" height="10" 
style="fill:#FFFFFF;stroke:#000000 ,, display= ,, none ,, /^ 

</g> 

</ g > 

15 <gid="ButtonLeftSkinSmaH"> 
<g id="up" display="all"> 

<rect x="l" y="l" width="10" height="10" style="fill- 

ride:evenodd;cUp-mle:evenodd;fill:#FFFFFF;stroke:#B3B3B3;stroke-vwdth:1.0001;stroke- 
miterlimit:2.6131;7> 

20 <rect x="0" y="0" width="10" height="10" 

style="fill:#FFFFFF;stroke:#000000"/> 

<text x ="S" y="5" style="font-family:Tahoma , ;stroke:lione;font- 
size:12;text-anchor:middle"> </text> 

<path d = "M 8 2 1 -6 3 1 6 3 z" 
25 style="fill:#000000;stroke:#FF0000;stroke-width:0"/> 

</g> 

<g id- 'down" display="none"> 
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<rect x="l" y="l" width="10" height="10" style="fill- 
mle:evenodd;clip-mle:evenodd;fill:#FFFFFF;stroke:#B3B3B3;stroke-width:1.0001;stro^ 
miterlimit:2.613 1 ;"/> 

<rect x="l" y="l" width="lO n h.eight="10" 
5 style="fill:#FFFFFF;stroke:#000000'7> 

<text x ="5" y="5" style="font-family:Tahoma';stroke:none;font- 
size: 12;text-anchor:middle"> </text> 

<path d="M 9 3 1 -6 3 1 6 3 z" 
style=' , fill:#FF0000;stroke:#FF0000;stroke-width:0 , '/> 

10 </g> 

<Ig> 

<g id="SliderSkinSmall"> 

<gid="up"display="all"> 

<rect id="SkinSliderSmallBorder" x="0" y="0" widtb="200" 
15 height="10"opacity="07> 

<gid="body"> 

<rect id="SkinSliderSmallBase" style="fill-rule:evenodd;clip- 
rule:evenodd;fill:#FFFFFF;stroke:#B3B3B3;stroke-width: 1 .0001 ;stroke-miterlimit:2.6131;" 
x =» i y=" i » width^'444" height=" 1 0"f> 

20 <rect id = " SliderSkinSmallBar" 

style="ffll:#FFFFFF;stroke:#000000" x="0" y="0" width="444" height="10'7> 

</ g > 

<g id="SliderSkinSmallThumb"> 

<rect i d = " s 1 i d e r T h u m b B a r " 
25 styte="mi:#B3B3B3;stroke:#00CK)00;stro^ 

</g> 

<g id- 'tickMajor" display="none"> 
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<text x="0" y="ll" id="tickLabelMajor" 
xml:space="preserve" style="font-face:Arial;font-size:8;fill:black;stroke:l;text- 
anchor:middle"x/text> 

</g> 

5 </g> 

<g id="mask n > 

<rect id="siiderMask" x="" y="0" width="444" height="18" 

opacity="0"/> 

</g> 

10 </g> 

<g id="ButtonRightSkinSmair> 

<g id="up" display="all"> 

<rect x="l" y="l" width="10" heights" 10" style="fill- 
rule:evenodd;cUp-rde:evenodd;fill:#FFFFFF;stroke:#B3B3B3;stroke-width: 1 .0001 ;stroke- 
15 miterlimit:2.6131;7> 

<rect x="0" y="0" width="10" height="10" 
style="fill:#FFFFFF;stroke:#000000"/> 

<text x ="5" y="5" style="font-family:Tahoma , ;stroke:none;font- 
size: 12;text-anchormiddle"> </text> 

20 <path d="M 2 2 1 6 3 1 -6 3 z" 

style="fill:#000000;stroke:#FF0000;stroke-width:0"/> 
</g> 

<g id- 'down" display="none"> 

<rect x="l" y="l" width="10" height="10" style="fill- 
25 rale:evenodd;c%-rule:evenodd;fill:#FFFFFF;stroke:#B3B3B3;stroke-width: 1 .0001 jstroke- 
miterlimit:2.6131;"/i» 



-150- 



CA 02414378 2002-12-09 



<rect x="r* y="l" width="10" height="l 0" 
style="fiU:#FFFFFF;stroke:#000000"/> 

<text x ="5" y="5" style^"font-family:'Tahoma';stroke:none;font- 
size: 12;text-anchor:middle"> </text> 

5 <path d = "M 3 3 1 6 3 1 -6 3 z" 

style="fill:#FF0000;stroke:#FF0000;stroke-width:0"/> 

</g> 

</gX/svg> 

10 skinSlider_Defaultsvg 

<?xml version=" 1 .0"?> 
<svg xmlns:dsvg="http://corel.org/dsvg"> 
<gid="skinSlider"> 
<gid="label"> 

15 <text id="skinComboBoxDefault_bodyText" x="0" y="-6" 

fill="black"></text> 

<dsvg:constraint scalelmmunity="true" hAlign="left" 

vAlign="bottom"/> 
</g> 

20 <gid= ,, up ,, display="all"> 

<rect id="skinSliderBorder" x="0" y="0" width="200" height="18 M 
fill="none" stroke="none" pointer-events="fill"/> 

<gid="body"> 

<rect id= M skinSliderBase" fill="#EEEEEE" stroke="none" 
25 x="0" y="7" width="200" height="47> 



-151- 



CA 02414378 2002-12-09 



<rect id="skinSliderBar" fill-'#EEEEEE" stroke="none" 
x =»0" y="7" width="200" height="47> 

<line xl="0" yl="7 M x2="200" y2="7" 

style="stroke:#B3B3B37> 
5 </g> 

<g id="skinSliderThumb"> 

<circle cx="3" cy="3" r="3" style="fill:black;stroke:none"/> 
<circlecx="3"cy="15"i="3"style="fiU:black;stroke:none"/> 
<rect style="fill:rgb(230,230,230);stroke:none" x="0" y="3" 

10 width="6"height="127> 

<line xl="0" yl="3" x2 = "0" y2="15" 
style="stroke:#B3B3B3;stroke-width:l"/> 

<line xl="1.5" yl="3" x2="1.5" y2="15" 
style="stroke:white;stroke-width:2"/> 

15 <line xl="6" yl = "3" x2="6" y2="15" 

style="stroke:#B3B3B3 ; stroke-width: 1 "/> 

</g> 

<g id="tickMajor" display="none H > 

<line xl="0" yl= M 7" x2="0" y2="17" 

20 style="stroke:#B3B3B3"/> 

<text id="tickLabelMajor" x="0" y="12" xml:space="preserve" 
sty^'^ont-faceiAriaUfont-size: 8;fill:#B3B3B3;stroke-width: 1"> </text> 

</g> 

<g id="tickMinor" display="none"> 

25 <line xl="0" yl="7" x2="0" y2="ll'* 

style="stroke:#B3B3B37> 

</g> 
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</g> 

<g id="down" display="none"> 

<rect id="skinSliderBorder" x="0" y="0" width="200" height="18" 
fill="none" stroke="none" pointer-events- Tiir/> 

<g id=*'body"> 

<rect id="skinSliderBase" fill-'#EEEEEE" stroke="none" 
x="0" y="7" width="200" height="47> 

<rect id="skinSliderBar" fill="#EEEEEE" stroke="none" 
x="0" y="7" width="200" height="47> 

<linexl="0" yl="7 ,, x2= ,, 200" y2="7" style="stroke:black"/> 

</g> 

<g id="skinSliderThumb"> 

<circle cx="3" cy="3" r="3" 
style="fill:#199DBF;stroke:none"/> 

< c i r c 1 e c x = " 3 " c y = " 1 5 " r = " 3 " 
style=*'fill:#199DBF;stroke:none7> 

<rect style="fill:rgb(230,230 > 230);stroke:none" x="0" y=*'3" 

width="6" height="127> 

<line xl="0" yl = "3" x2 = "0" y2 = "15" 
styIe="stroke:#B3B3B3;stroke-width: 1 "/> 

<line xl="1.5" yl = "3" x2="1.5" y2="15" 
style="stroke:white;stroke-width:2"> 

<line xl="6" yl="3" x2 = "6" y2 = "15" 
style="stroke:#B3B3B3 ;stroke-width: 1 7> 

</g> 

<g id="tickMajor" display="none"> 
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<line xl="0" yl="7" x2="0" y2="17" style="stroke:black"/> 

<text id="tickLabelMajor" x^'O" y=" 12" xml:space="preserve" 
style="font-face:Arial;font-size:8;fill:black;stroke-width: 1 "> </text> 

</g> 

<g id="tickMinor" display="none"> 

<line xl="0" yl="7" x2="0" y2="l 1" styleF"stroke:black"A> 

</g> 

</g> 

<g id- 'hover" display="none"> 

<rect id^'skinSliderBorder" x="0" y="0" width="200" height="18" 
fiil="none M stroke="none" pointer-events="fill"/> 

<g id="body"> 

<rect id="skinSliderBase" fiU="#EEEEEE" stroke="none" 
x =»0« y="7" width="200" height="47> 

<rect id="skinSliderBar" fill="#EEEEEE" stroke="none n 
x=**0" y="7" width="200" height="4"/> 

<linexl= ,, 0 ,, yl= M 7"x2="200"y2="7"style= ,, stroke:black"/> 

</g> 

<g id="skinSliderThumb"> 

< c i r c 1 e cx = "3" c y = " 3 " r = " 3 " 
style="fill:#199DBF;stroke:none7> 

<circle cx="3" c y = " 1 5 " r = " 3 " 
style="fiU:#l 99DBF;stroke:none"/> 

<rect style="fiU:rgb(230,230,230);stroke:none" x="0" y="3" 

width="6" height="12"/> 
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<line xl="0" yl="3" x2="0" y2="15" 
style="stroke:^3B3B3;stroke-width:l"/> 

<line xl="1.5" yl="3" x2="1.5" y2="15" 
style^"stroke:wMte;stroke-width:2"/> 

5 <line xl="6" yl = "3" x2 = "6" y2 = ' , 15" 

style="stroke:#B3B3B3;stroke-width: l"/> 

</g> 

<g id="tickMajor" display="none"> 

<line xl="0" yl="7" x2="0" y2= ,, 17' , style="stroke:black"A> 

10 <^extid="tickI^belMajor"x="0 M y="12"xnd:space= n preserve" 
style='Tont-face:Arial;font-size:8;fill:black;stroke-width:r><^ext> 

</ g > 

<g id="tickMinor" display="none"> 

<line xl="0" yl="7" x2="0" y2="l 1" style="stxoke:black"/> 

15 </g> 
</g> 

<g id- 'disabled" display="none"> 

<rect id="skinSliderBorder" x="0" y="0" width="200" height="18" 
20 fill="none" stroke="none" pointer-events="fill"/> 

<gid="body"> 

<rect id="skinSliderBase" fill="#EEEEEE" stroke="none" 
x="0" y="7" width="200" height="47> 

<rect id="skinSliderBar" fill="#EEEEEE" stroke="none" 
25 x="0" y="7" width="200" height="4'7> 

<line xl="0" yl="7" x2="200" y2="7" stroke= M #B3B3B3"/> 
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</g> 

<g id="skinSliderThumb"> 

<circle cx="3" cy="3" r="3" style="fill:black;stroke:none'7> 

<circle cx="3" cy="l 5" r="3" style="fill:black;stroke:none7> 

5 <rect style="fill:rgb(230,230,230);stroke:none" x="0" y="3" 

width="6"height="127> 

<line xl="0" yl="3" x2="0 n y2="15" 
style="stroke:B3B3B3 ;stroke-width: 1 7> 

<line xl="1.5" yl="3" x2= M 1.5" y2="15" 
1 0 style="stroke:white;stroke-width:27> 

<line xl="6" yl="3" x2="6" y2="15" style="stroke:black" t> 

<fg> 

<g id="tickMajor" display="none"> 

<line xl = "0" yl = "7" x2="0" y2 = "17" 

15 style="stroke:#B3B3B3"/> 

<text id="tickLabelMajor" x="0" y=" 1 2" xml:space="preserve" 
style="font-face:Arial;font-size:8;fill:#B3B3B3;stroke-width:l"><text> 

<g> 

<g id="tickMinor" display="none"> 
20 <line xl="0" yl="7" x2="0" y2="l 1" stroke="#B3B3B37> 

</g> 

</g> 

<g id="mask" > 

25 <rect id="skinSliderMask" x="-4" y= M 0" width="208" height="18" 

fill="none" stroke="none" pointer-events="fiU"/> 
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</g> 

</g> 

</svg> 

5 skinSlider_Windows.svg 

<?xml version="1.0"?> 
<svg xmlns:dsvg="httpy/corel.org/dsvg"> 
<g id="skinSlider"> 
<g id="laber> 

10 <text id= ,, skinComboBoxDefault_bodyText" x= ,, 0 ,, y="-6" 

fill="black"> </text> 

<dsvg:constraint scalelramunity="true" hAlign="left" 

vAlign="bottom7> 

</g> 

1 5 <g id="up" display="air> 

<rect id="skinSliderBorder" x="0" y="0" width="200" height="18" 
fill="none" stroke="none" pointer-events="fill"/> 

<g id="body"> 

<rect id="skinSliderBase" style="fill:#FFFFFF;stroke:none" 
20 x="0" y="7" width="200" height="47> 

<rect id="skinSliderBar" style="fill:#i-^i'i'M';stroke:none" 
x =»0" y=»7" width="200" height="4"/> 

<line xl="0" yl="7" x2="200" y2="7" 

style^'stroketfBSBSBS"^ 
25 </g> 

<g id="skinSliderThumb , '> 
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<circle cx="3" cy="3" r="3" style="fill:black;stroke:none7> 
<circle cx="3" cy="l 5" r="3" style= ,, fill:black;stroke:none"/> 
<rect style="fill:rgb(230 ) 230,230);stroke:none" x="0" y="3" 

width= M 6"height="12 H /> 

5 <line xl="0" yl="3" x2 = "0" y2 = "15" 

style="stroke:#B3B3B3;stroke-width: 1 7> 

<line xl="1.5" yl="3" x2="1.5" y2="15" 
style- 'stroke:white;stroke-width:2"A> 

<line xl = "6" yl = "3" x2 = "6 M y2 = "15" 
1 0 style="stroke:#B3B3B3;stroke-width: 1 "/> 

</g> 

<g id="tickMajor" display="none"> 

<line xl = "0" yl = "7" x2 = "0" y2 = "17 n 

style="stroke:#B3B3B3 ,, /> 

15 <textid= ,, tickI^elMajol J, x= , •0"y= ,, 12 ,, xml:space^ , prese^ve , ' 
style="font-face:Arial;font-si^ 

</g> 

<g id="tickMinor" display="none"> 

<line xl = "0" yl = H 7" x2="0" y2 = "H" 

20 style="stroke:#B3B3B3'7i> 

</g> 

</g> 

<g id="down" display="none"> 

25 <rect id="skinSliderBorder" x="0" y="0 n width="200" height="l 8" 

fill="none" stroke="none" pointer-events- 'fiU7> 
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<gid="body"> 

<rect id="skinSliderBase" style="fill:#FFFFFF;stroke:none" 
x =»0" y=»7" width= M 200 H height="47> 

<rect id="skinSliderBar" style="fill:#FFFFFF;stroke:none" 
5 x="0" y="7" width="200" height="47> 

<linexl="0 ,, yl="7' , x2="200"y2= , 7"style="stroke:black"/> 

</g> 

<g id="skinSliderThumb"> 

< c i r c 1 e c x = " 3 " cy = "3" r = " 3 " 
10 style="fill:#199DBF;stroke:none"/> 

< c i r c 1 e c x = " 3 ■ c y = " 1 5 " r = " 3 " 
style="fill:#199DBF;stroke:none"/> 

<rect style="ffll:rgb(230,230^30);stroke:none" x^'0" y="3 M 

widtb^'Vheighi^'n"^ 

15 <line xl="0" yl="3" x2 = "0" y2 = "15" 

style="stroke:#B3B3B3;stroke-width: 1 "/> 

<line xl="1.5" yl="3" x2="1.5" y2="l5" 
style="stroke:white;stroke-width:2"/> 

<line xl="6" yl="3" x2="6" y2="15" 
20 style="stroke:#B3B3B3;stroke-width: 1 7> 

<J g > 

<g id="tickMajor" display="none"> 

<line xl="0" yl="7" x2="0" y2="17" style="stroke:black7> 

<textid="tickL^elMajor"x= ,l O^ 
25 style='Tont-face:Arial;font-size:8;fill:black;sto 

</g> 

<g id="tickMinor" display="none"> 
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<line x\="0" yl="7" x2="0" y2="ll" style="stroke:black"/> 

</g> 

</g> 

5 <g id="hover" display="none"> 

<rect id="skinSliderBorder" x= M 0" y= M 0" width="200" height="18 M 
fill="none" stroke="none" pointer-events="fill"/i> 

<g id="body"> 

<rect id="skinSliderBase" style="fill:#FFFFFF;stroke:none" 
1 0 x="0" y="7" width="200" height="4"/> 

<rect id="skinSliderBar" s^e="fill:#FFFFFF;stroke:none" 
x =»0» y = l 7" width="200" height="4 M /> 

<linexl="0" yl="7" x2="200" y2="7" style="stroke:black"> 

</ g > 

1 5 <g id="skinSliderThumb"> 

< c i r c 1 e cx = "3" c y = " 3 " r = " 3 " 
style="fill:#199DBF;stroke:none"/> 

<circle c x = " 3 " cy="15" r = " 3 " 
style="fiU:#199DBF;stroke:none"/> 

20 <rect style= M fill:rgb(230,230,230);stroke:none" x="0" y= ,, 3" 

widtfa="6" height="127> 

<line xl="0" yl="3" x2 = "0" y2 = "15" 
style="stroke:#B3B3B3;stroke-width: 1 "/> 

<line xl="1.5" yl="3" x2="1.5" y2="15" 
25 style="stroke:white;stroke-width:2"/> 

<line xl="6" yl="3" x2 = "6" y2 = "15" 
style="stroke:#B3B3B3;stroke-width:l"/i> 
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</g> 

<g id="tickMajor" display="none"> 

<line xl="0" yl="7" x2="0 M y2="17" style^'strokerblack'V^ 

<textid=''tick]^eMajor' , x==' , 0 M y= ,, 12 ,, xml:space= , 'preserve ,, 
5 style= H font-face:Anal;font-size:8;fil^ 

</g> 

<g id="tickMinor" display="none"> 

<line xl="0" yl-"7" x2="0" y2="ll" style="stroke:black"/> 

<Jg> 

10 </g> 

<g id- 'disabled" display="none"> 

<rect id="skinSliderBorder" x="0" y="0" width="200" height="18" 
fill="none" stroke="none" pointer-events="fiH7> 

15 <gid="body"> 

<rect id="skinSliderBase" style="fill:#FFFFFF;stroke:none" 
x =»0» y=«7" width="200" height="4"/> 

<rect id="skinSliderBar" style="fill:#FFFFFF;stroke:none" 
x="0 n y="7" width="200" height="4"/> 

20 <line xl="0" yl="7" x2="200" y2="7" 

style^'stroke^BSBSBS''^ 

</g> 

<g id="skmSliderThumb H > 

<circle cx="3" cy="3" r='*3" style="ffll:black;stroke:none"/> 
25 <circle cx="3" cy=" 1 5" r="3" style="fill:black;stroke:none"/> 
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<rect style="fill:rgb(230,230 ) 230);stroke:none" x="0" y="3" 

width="6"height="12'7> 

<line xl="0" yl="3" x2 = "0" y2="l5" 
style="#stroke:B3B3B3;stroke-width: 1 7> 

5 <line xl="1.5" yl="3" x2="1.5" y2="15" 

style="stroke:white;stroke-width:27> 

<line xl = "6" yl = "3" x2 = "6" y2 = "15" 
style="#stroke:000000;stroke-width: 1 "/> 

</g> 

1 0 <g id="tickMajor" display="none"> 

<line xl="0" yl = "7" x2 = "0" y2="17" 

style="stroke:#B3B3B37> 

<textid="tickLabelMajor" x="0" y="12" xml:space="preserve" 
style='Tont-face:Arial;font-size:8;fill:#B3B3B3;stroke:l;text-anchor:middle , '></text> 

15 </g> 

<g id="tickMinor" display="none"> 

<line xl=**0" yl = "7" x2 = "0" y2="ll" 

style="stroke:#B3B3B37> 
</g> 

20 </g> 

<g id="mask" > 

<rect id="skinSliderMask" x="-4" y="0" width="208" height= M 18" 
fill="none" stroke="none" pointer-events="fiU7> 

25 </g> 

</g> 
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</svg> 



skinSpin_Composite.svg 

<?xml version="1.0"?> 
<svgxmlns:dsvg="htQ)://corel.org/(isvg"> 
<g id="skinSpin"> 

<use id = "TextBoxSkin" 
xlink:href i ="skinTextBox_Spin_Short.svg#skinTextbox" x="0" y="07> 

<use id = " Button. SkinUp" 
xUnk:hre^"skinSpin_Composite.svg#skinSpinButtonUp" x="100" y="-17> 

<use id-"Butto. nSkinDown" 
xlink:hre^"skinSpin_0)mposite.svg#skinSpinButtonDown" x="100 H y="87> 

<gid="label"> 

<text x="0" y="-6" style="font-size:12;fill:black"> 

<dsvg:constraint preserveAspectRatio="vertical" 

hAlign="middle"/i> 

</text> 

</g> 

</g> 



<g id="skinSpinButtonUp"> 

<g id="up" display="all"> 

<rect x="0" y="0" width="18" height="9" 
style="fill:rgb(230,230,230);stroke:none7> 

<polyline points="0,9 0,0 18,0" style="stroke- 
width: 1 ;stroke:wbite;fill:none"> 
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<polyline points="0,9 18,9 18,0" style="stroke- 
width: 1 ;stroke:black;fill:none7> 

<polygon points="3,6 9,3 15,6" style="stroke- 
width: 1 ;stroke:black;fill:black"/> 

5 </g> 

<g id- 'down" display="none"> 

<rect x="0" y="0" width="18" height="9" 
style="fill:rgb(230,230,230);stroke:none"/> 

<polyline points="0,9 0,0 18,0" style="stroke- 
10 width: l;stroke:black;fiU:none"A> 

<polyline points="0,9 18,9 18,0" style="stroke- 
width: 1 ;stroke : white;fill:none"/> 

<polygon points="3,6 9,3 15,6" style="stroke- 
width:l;stroke:#199DBF;fill:#199DBF"/> 

15 </g> 

<g id="hover" display="none"> 

<rect x="0" y="0" width="18" height="9" 
style="fill:rgb(230,230,230);stroke:none"/> 

<polyline points="0,9 0,0 18,0" style="stroke- 
20 width:2;stroke:white;fill:none"/> 

<polyline points="0,9 18,9 18,0" style="stroke- 
width:2;stroke:black;fill:none"/> 

<polygon points="3,6 9,3 15,6" style="stroke- 
width: 1 ;stroke:#l 99DBF;fiU:#199DBF"/> 

25 </g> 

<gid="disabled" style="opacity:0.5" transform="scale(0.5)" display="none"> 
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<rect x="0" y="0" widtb="18" height="9" 
style="fill:rgb(230,230,230);stroke:none"/> 

<polyline points="0,9 0,0 18,0" style="stroke- 
width: 1 ;stroke:white;fill:none7> 

5 <polyline points="0,9 18,9 18,0" style="stroke- 
width: 1 ;stroke:black;fill:none"/> 

<polygon points="3,6 9,3 15,6" style="stroke- 
width: 1 ;stroke:black;fill:black"£> 

10 </g> 



<g id="skinSpinButtonDown"> 
<g id="up" display="all"> 

<rect x="0" y="0" width="18" height="9" 
1 5 style="fill:rgb(230,230,230);stiokemone"/> 

<polyline points="0,9 0,0 18,0" style="stroke- 
width: 1 ;stroke:white;fill:none"/> 

<polyline points="0,9 18,9 18,0" style="stroke- 
width: 1 ;stroke:black;fill:none"/> 

20 <polygon points="3,3 9,6 15,3" style="stroke- 

width: 1 ;stroke:black;fill:black"/> 

</g> 

<g id="down" display="none"> 

<rect x="0" y="0" width="18" height="9" 
25 style="fill:rgb(230,230,230);stroke:none"/> 

. <polyline points="0,9 0,0 18,0" style="stroke- 
width: 1 ;stroke:black;fill:none"/> 
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<polyline points="0,9 18,9 18,0" style="stroke- 
width: 1 ;stroke:white;fill:none"/> 

<polygon points="3,3 9,6 15,3" style="stroke- 
width:l;stroke:#199DBF;fill:#199DBF"/> 

5 </g> 

<g id="hover" display="none"> 

<rect x="0" y="0" width="18" height="9" 
style="ffll:rgb(230,230,230);stroke:none"/> 

<polyline points="0,9 0,0 18,0" style="stroke- 
10 width:2;stroke:white;fill:none"/> 

<polyline ppints="0,9 18,9 18,0" style="stroke- 
width:2 ;stroke:black;fill:none"/> 

<polygon points="3,3 9,6 15,3" style="stroke- 
width: 1 ;stroke:#199DBF;fill:#l 99DBF'/> 

15 </g> 

<g id="disabled" style="opacity:0.5" display="none"> 

<rect x="0" y="0" width="18" height="9" 
style="fill:rgb(230,230,230);stroke:none"/> 

<polyline points="0,9 0,0 18,0" style="stroke- 
20 width: 1 ;stroke:white;fill:none"/> 

<polyline points="0,9 18,9 18,0" style="stroke- 
width: 1 ;stroke:black;fillaione"/> 

<polygon points="3,3 9,6 15,3" style="stroke- 
width: 1 ;stroke:black;fill:black"/> 

25 </g> 

</g> 

</svg> 
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skinTextBox_Combobox.svg 

<?xml version="1.0"?> 

<svg xmlns:dsvg="http://corel.org/dsvg"> 

<g id="skiiiTextbox"> 

<gid="up"style=' , fill-rule:nonzero;clip-rule:nonzero;stroke:#000000;stroke- 
miterlimit:4;" display="all"> 

<rect x="0" y="0" width="200" height="17" 
style="fill:#FFFFFF;stroke:#A3A3A3;stroke-widtJi:l"/> 

</g> 

<g id = "hover" style = "fill-rule:nonzero;clip- 
rule:nonzero;stroke:#000000;stroke-miterlimit:4;" display=* , none"> 

<rect x="0 M y="0" width="200" height="17" 
style="fill:#FFFFFF;stroke:#A3A3A3;stroke-width:l"/> 

</g> 

<g id = "down" s t y 1 e = " f i 1 1 - r u 1 e : no n z er o ; c 1 i p - 
rule:nonzero;stroke:#000000;stroke-miterlimit:4;" display="none"> 

<rect x="0" y="0" width="200" height="17" 
style="fill:#FFFFFF;stroke:#A3A3A3;stroke.width:l"/> 

<line id=*'skinTextbox_cursor" xl="3" yl="2" x2="3 H y2="16" 

style="stroke:black"> 

<animate attributeType="CSS" attributeName="opacity" 
values="0;0;0;0;0;0;l;l;l;l;l;l" dui="ls" repeatCount= ,, indefinite"/> 

</line> 

</g> 

<g id = "disabled" style = "fill-rule:nonzero;clip- 
rule:nonzero;stroke:#000000;stroke-nMterlinut:4;opacityOJ;"display="^ 
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<rect x="0" y="0" width="200" height="17" 
style="fill:#FFFFFF;stroke:#A3A3A3;stroke.width:l"/> 

</g> 

<clipPath id="skinTextbox_textView"> 

5 <rect id="skinTextbox_textArea" x="3" y="3" width="205" 

height="12 n /i> 

</clipPath> 

<text clip-path="url(#skinTextbox_textView)" id="skinTextbox_text" 
10 xml:space="preserve" x="3" y=" 15" style="font-face:Arial;font- 
size: 12;fill:black;stroke: 1 "></text> 

</g> 

</svg> 

15 

skinTextBox_Combobox_Short.svg 

<?xml version="1.0"?> 

<svg xmlns:dsvg="http://corel.org/dsvg"> 

20 <g id="skinTextbox"> 

<gid="up"style="fill-rule:nonzero;cli^^ 
miterlimit:4;" display="all"> 

<rect x="0" y="0" width^'133" height="17" 
sty^'Till^FFFFFFjstroke^ASASASistroke-width:!^ 

25 <g> 
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<g id="hover" style = "fill-rule:nonzero;clip- 
rale:nonzero;stroke:#000000;stroke-miterlimit:4;"display="none"> 

<rect x="0" y="0" width="133" height="17" 
style="fill:#FFFFFF;stroke:#A3A3A3;stroke-width:l"/> 

5 <g> 

<g id = "down" style = " fill-rule :nonzero;clip- 
rule:non2ero;stroke:#000000;stroke-miterlimit:4;" display="none"> 

<rect x= M 0" y="0" width="133" height="17" 
style="fill:#FFFFFF;stroke:#A3A3A3;stroke-width:l"/> 

10 <line id^'skinTextbox^ursor" xl="3" yl="2" x2="3 M y2="16" 

style="stroke:black"> 

<animate attributeType="CSS" attributeName="opacity" 
values="0;0;0;0;0;0;l ; 1 ; 1 ; 1 ; 1 ;1 " dur="ls" repeatCount="indefinite"/> 

</line> 

15 </g> 

<g id = "disabled" style="fill-rule:nonzero;clip- 
rule:nonzero;stroke:#000000;stroke-miterlimit:4;opacity:0.5;" display="none"> 

<rect x="0" y="0" width="133" height="17" 
style="fill:#FFFFFF;stroke:#A3A3A3;stroke-width:l"/> 

20 </g> 

<clipPathid="skinTextbox_textView"> 

<rect id="skinTextbox_textArea" x="3" y="3" width="138" 

heightF="12"/> 

</clipPath> 

25 
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<text clip-path="url(#skinTextbox_textView)" id="skinTextbox_text" 
xml:space="preserve" x="3" y=" 15" s^ie="font-&ce:Arial^bnt-size: 12;fiU:black;stroke: 1 "x/text> 
</ g > 

5 </svg> 



skinTextBoxDefault.svg 

<?xml version="1.0"?> 

10 <svg xmlns:dsvg="http://corel.org/dsvg"> 

<g id="skinTextbox"> 

<g id="up" style="fill-nile:nonzero;clip-mle:nonzei-o;stroke:#000000;stroke- 
miterlimit:4;stroke-width:l" display="all n > 

<rect style = "fill-rule:evenodd;clip- 
15 rule:evenodd;fill:#FFFFFF;stroke:#B3B3B3;stroke-miterlimit:2.6131;" x="3" y="3" 
width="228" heights" 187> 

<rect style="fill:white;stroke:grey" x="0" y="0" width="228" 

height= M i8"/i> 

<dsvg: constraint pro pertyName=" stroke- width" 
20 scale&nmunity="true"/> 

</g> 

<g id = "hover" style = "fill-rule:nonzero;clip- 
rule:nonzero;stroke:#000000;stroke-miterlimit:4;stroke-width: 1 ;" display="none"> 

<rect s t y 1 e = " fill-rule : evenodd;clip- 
25 rule:evenodd;fiU:#FFFFFF;stroke:#B3B3B3;stroke-miterlimit:2.6131;" x="3" y="3" 
width="228" height="187> 
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<rect style="fill:white;stroke:#000000" x="0" y="0" width="228" 

height="18'7> 

<dsvg: constraint pr op ertyName=" stroke- width" 
scaleImmunity="true"/> 

5 <J%> 

< g id = "down" style = "fill-rule:nonzero;clip- 
nde:nonzero;slroke:#000000;stroke-miterlimit:4;stroke-width: 1 ;" display="none"> 

<rect style="fill-rule:evenodd;clip- 
rule:evenodd;fill:#FFFFFF;stroke:#B3B3B3;stroke-miterlimit:2.61 3 1 ;" x="3" y="3" 
10 width="228" height="187> 

<rect style="fill:white;stroke:#000000" x="0" y="0" width="228" 

height="187> 

<bne id="skinTextbox_cursor" xl="3" yl="2" x2="3" y2="16" 

style="stroke:black"> 

15 <animate attributeType="CSS" attributeName="opacity" 

values="0;0;0;0;0;0; 1 ; 1 ; 1 ; 1 ; 1 ; 1 " dur=" Is" repeatCount="indefmite'7> 

<dsvg:constraint scalelmmunity="true" hAlign-'left" 

vAlign="top"/> 

</line> 

20 <dsvg:constraint propertyName="stroke-width" 

scaleImmuiiity="true"/> 

</ g > 

<g id = "disabled" style = "fill-rule:nonzero;clip- 
rule:nonzero;stroke:#000000;stroke-miterlimit:4;opacity:0.5;stroke-width.l;" 
25 display="none"> 

<rect style="fill-rule:evenodd;clip- 
mle:evenodd;fill:#FFFFFF;stroke:#B3B3B3;stroke-miterlimit:2.613 1 ;" x="3" y="3" 
width="228" height="187> 
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<rect style="fill:gray;stroke:#000000" x="0" y="0" width="228" 

height="18"/> 

<dsvg: constraint prop ertyName=" stroke- width" 
scaleLnmunity= ! "true"/> 

5 </g> 

<g id="laber style="font-family:Tahoma';stroke:none;font-size: 1 2"> 
<text x="0" y="-6" fill="black"> </text> 

<dsvg:constraint scalelmmunity="true" hAlign="left" 

vAlign="bottom'7> 
10 </g> 

<clipPathid= M slcinTextboxJextView ,, > 

<rect id="skinTextbox_textArea M x= M 3" y="3" width="222" 

height="12"/> 

</clipPath> 

15 

<text clip-path="url(#skinTextbox_textView)" id="skinTextbox_text" 
xml:space="preserve" x="3" y="15" style="font-face: Arial;font- 
size: 1 2;fill:black;stroke: 1 "xdsvg.constraint scalelmmunity="true" hAlign="left" 
vAlign="top"/x/text> 

20 </g> 

<g id="slrinTextboxMultiLine"> 

<g id- 'up" style="fi ll-rule:nonzero;clip-ruleaionzero;stroke:#000000;stroke- 
miterlimit:4;" display="all"> 

<rect style = "fill-rule:evenodd;clip- 
25 mle:evenodd;ffll:#ITFFFF;stroke:#B3B3B3 
x="3" y="3" width="228" height="54"/> 
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<rect style="fiU:white;stroke:grey M x="0" y="0" width="228" 

height="547> 

</g> 

< g id = " hover" style = "fill-rule:nonzero;clip- 
5 rule:nonzero;stroke:#000000;stroke-miterlimit:4;" display="none'> 

<rect style = "fill-rule:evenodd;clip- 
rule:evenodd;fill:#FFFFlT;stroke:#B3B3B3;stroke-width: 1 .0001 ;stroke-miterlimit:2.6 1 3 1 ;" 
x =»3» y=" 3 » width="228" height="54'7> 

<rect style="fill:white;stroke:#000000" x^'0" y="0" width="228" 

10 height="54'V> 

</g> 

<g id = "down" style = "fill-rule:nonzero;clip- 
rule:nonzero;stroke:#000000;stroke-miterlimit:4;" display="none"> 

<rect style="fill-rule:evenodd;clip- 
15 mle:evenodd;fiU:#FF1WF;sti^ 

x ="3» y=:»3" widtb^'228" height="54"/> 

<rect style="fiH:wMte;stroke:#000000" x="0" y= ,, 0" width="228" 

height="547> 

<line id="skinTextboxMultiLine_cursor" xl="3" yl="2" x2="3" 
20 y2="16" style="stroke:black"> 

<animate attributeType="CSS" attributeName="opacity" 
values="0;0;0;0;0;0;l;l;l;l;l;l" dur="ls" repeatCount="indefinite"/> 

<dsvg:constraint scalelmmunity="true" hAlign="left" 

vAlign="top"/> 
25 </line> 
<Jg> 
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<g id = "disabled" style="fill-rule:nonzero;clip- 
rale:nonzero;stroke:#0000(X);stroke-miterliinit:4;opacity:0.5;" display="none"> 

<rect style- "fill-rule :evenodd;clip- 
rule:evenodd;M:#FFITrT;stroke:#B3B3B3;stroke-width: 1 .0001 ;stroke-miterlimit:2.6131;" 
5 x="3 M y="3" width="228" height="547> 

<rect style="fill:gray;stroke:#000000" x="0" y="0" width="228" 

height="54 ,, /> 

</g> 

<g id-label" style="font-family:Tahoma , ;stroke:none;font-si2e: 12"> 
10 <text x="0" y="-6 ,, fill="black"> </text> 

<dsvg:constraint scalelmmunity="true" hAlign="left" 

vAlign="bottom"/> 

</g> 

<cbpPattid="skinTextboxMultiLine_textView ,, > 

15 <rectid="skinTextboxMultiLine_textArea"fill= ,, green"x= ,, 3 , 'y="3" 
width="222" height="48 n /> 

</clipPath> 

<text clip-path="url(#skinTextboxMultiLine_textView)" 
id="skinTextboxMultiLine_text" xml:space="preserve" x="3" y="15" style="font- 
20 face:Arial;font-size: 12;fill:black;stroke:none"><dsvg:constraint scalelramunity="true" 
bAlign="left" vAlign="top"/Xtext> 

</g> 

</svg> 

25 

skinTextBox Listbox.svg 

<?xml version=" 1 .0"?> 
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<svg xmlns:dsvg="http://corel.org/dsvg"> 

<g id="skinTextbox"> 

<gid="up" style="fill-rulenionzero;clip-rule:nonzero;stroke:#000000;stroke- 
miterlimit:4;" display="air> 

5 <rect x="0" y="0" width»"200" height="17" 

style="fill:#FFFFFF;stroke:#A3A3A3;stroke-width:l"/> 

<Jg> 

<g id = " hover" style = "fill-rule:nonzero;clip- 
rule:noazero;stroke:#000000;stroke-miterlimit:4;" display="none"> 

10 <rect x="0" y="0" width="200" height="17" 

style="fill:#FFFFFF;stroke:#A3A3A3;stroke-width:l"/i> 

</g> 

<g id = "down" style = "fill-rule:nonzero;clip- 
nde:nonzero;stroke:#0(X)000;stroke-miterlimit:4;'' display="none"> 

15 <rect x="0" y="0" width="200" height="17" 

style="fill:#FFFFFF;stroke:#A3A3A3;stroke-width:l"> 

<line id= , 'skmTextbox_cursor" xl="3" yl="2" x2="3" y2="16 M 

style- 'stroke:black"> 

<animate attributeType="CSS" attributeName^'opacity" 
20 values="0;0;0;0;0;0;l;l;l;l;l;r dur="ls" repeatCovint="indefinite"/> 

</line> 

</g> 

<g id = "disabled" style = "fill-rule:nonzero;clip- 
rlUe:nonzero;st^oke:#000000;stroke-Inite^limit:4;opacity:0.5; ,, display="none"> 

25 <rect x="0" y="0" width="200" height="17" 

style= M fill:#FFFFFF;stroke:#A3A3A3;stroke-width:l"/> 

</g> 
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<clipPathid="skinTextbox_textView"> 

<rect id="skinTextbox_textArea" x="3" y="3" width="205" 

b.eight="12"/> 

</cIipPath> 

5 

<text clip-path="url(#skinTextbox_textView)" id="skinTextbox_text" 
xml:space="preserve" x="3" y="15" style="font-face: Arial;font- 
size: 12;fill:black;stroke: 1 "x/text> 

</g> 

10 

</svg> 



skinTextBox_Spin_Short.svg 

15 <?xmlversion="1.0 ,, ?> 

<$vgxmlns:dsvg= M http://corel.org/dsvg"> 

<g id="skinTextbox"> 

<g id="up" styl^"fiU-rule:nonzero;cUp-rule:nonzero;stioke:#000000;stroke- 
miterlimit:4;" display="all"> 

20 <rect x="0" y="0" width="100" height="17" 

style="fill:#FFFFFF;stroke:#A3A3A3;stroke-width:l"/> 

</g> 

<g id = "hover" style = "fill-rule:nonzero;clip- 
rule:nonzero;stroke:#000000;stroke-miterlimit:4;" display="none"> 

25 <rect x="0" y="0" width="100" height="17" 

sty^'-fill^FFFFFFistroke^ASASAajstroke-width:!"^ 
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</g> 

<g i d = " d o w n " style = "fill-rule:nonzero;clip- 
rule:nonzero;stroke:#000000;stroke-miterliniit:4;"display s ="none"> 

<rect x="0" y="0" width="100" height="17" 
5 style="fill:#FFFFFF;stroke:#A3A3A3;stroke-width:l"/> 

<line id="skinTextbox_cuisor" xl="3" yl="2 n x2="3" y2="16" 

style="stroke:black"> 

Onimate attributeType="CSS" attributeName="opacity" 
values="0;0;0;0;0;0; 1 ; 1 ; 1 ; 1 ; 1 ; 1" dur=" 1 s" repeatCoimt="indefiniteV> 

10 </line> 
</g> 

<g id = "disabled" style="fill-rule:nonzero;clip- 
mle:nonzero;stroke:#000000;stroke-miterlimit:4;opacity:0.5;"display="none''> 

<rect x="0" y="0" width="133" height="17" 
15 style="fill:#FFFFFF;stroke:#A3A3A3;stroke-width:l"> 

<Jg> 

<clipPathid="skinTextbox_textView"> 

<rect id="skinTextbox_textArea" x="3" y="3" width="108" 

height="127> 
20 </clipPath> 

<text clip-patb="u^l(#skinTextbox_textView) ,, id="skinTextbox_text" 
xml:space="preserve" x="3" y="15" style="font-face: Arial;font- 
size: 1 2;fill:black;stroke: 1 "x7text> 

25 </g> 
</svg> 
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skinTextBox_vp.svg 

<?xml version=" 1 .0"?> 
<svg> 

5 <g id="skinTextbox"> 

<g id="up" style^"fUl-rule:noii2«ro;cHp-njle:noiizero;stroke:#000000;stroke- 
miterlimit:4;" display="alT> 

<rect style = "fill-rule:evenodd;clip- 
mle:evenodd;fill:#FFFFFF;stroke:#B3B3B3;stroke-width:1.0001;stroke-miterlm^^ 
10 x="3" y="3" width="228** height="18"/> 

<rect style= M fill:white;stroke:grey" x="0" y="0" width="228" 

height="18"/> 

</ g > 

<g id="hover" s t y 1 e= " f i 1 1 - ru 1 e : non z ero ; cl ip - 
15 rule:nottzero;stroke:#000000;stroke-miterlimit:4;" display="none'*> 

<rect style = "fill-rule:evenodd;clip- 
rule:evenodd;fill:#FFFFFF;stroke:#B3B3B3;stroke-width: 1 .000 1 ;stroke-miterlimit:2.61 31;" 
x="3" y="3 n width="228" height="187> 

<rect style="fiU:white;stroke:#000000 M x="0" y="0" width="228" 

20 height= M 187> 

</ g > 

<g id = "down" s t y 1 e = " f i 1 1 - r u 1 e : n o n z ero ; c 1 ip - 
rule:nonzero;stroke:#000000;stroke-miterlimit:4;" display="none"> 

<rect s t y 1 e = " fill-rule:evenodd;clip- 
25 rule:evenodd;fill:#FFFFFF;stroke:#B3B3B3;stroke-width: 1 .0001 ;stroke-miterlimit:2.61 3 1 ;" 
x ="3« y=»3« width="228 M height="187> 
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<rect style="fill:white;stroke:#000000" x="0" y="0" width="228" 

height="187> 

<line id="skinTextbox_cursor" xl="3" yl="2 M x2="3 M y2="16" 

style="stroke:black"> 

5 <animate attributeType="CSS" attributeName="opacity" 

values= M 0;0;0;0;0;0;l;l;l;l;l;l" dur="ls" repeatCount="indefinite"/> 

<71ine> 

</g> 

<g id=*"disabled" style="fill-rule:nonzero;clip- 
1 0 rule:nonzero;stroke:#000000;stroke-miterlimit:4;opacity:0.5 ; " display="none"> 

<rect style = "fill-rule:evenodd;clip- 
rule:evaiodd;fill:#FFFFFF;stroke:#B3B3B3;stroke-width:l .0001 ;stroke-miterlimit:2.613 1;" 
x= .. 3 „ y^g. width="228" height="18"/> 

<rect style="fill:gray;stroke:#000000" x="0" y="0" width="228" 

15 height="18"/i> 

</ g > 

<g id="laber> 

<textx="238" y="14" styte="font-size:12;fill:black ,, ></text> 

<g> 

20 <clipPath id="skinTextbox_textView"> 

<rect id="skinTextbox_textArea" x="3" y="3" width="222" 

height="12"> 

</clipPath> 

25 <text clip-path="url(#skinTextbox_textView)" id="skinTextbox_text" 

xml:space="preserve ,, x="3" y="15" style= M font-face: Arial;font- 
size:12;fill:black;stroke.T*Xtext> 
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<g> 

<g id="skmTextboxMultiLine"> 
<g id="up*' display="air> 

<rect stroke="#EEEEEE" stroke-width="2" fill="white" x="0" y="-5" 
width="380" height="195"/> 

<line stroke="black" xl="l" yl="-4" x2="380" y2="-4'V> 

<line stroke="black" xl="I" yl="-4" x2='T , y2= M 191"/> 

<rect stroke="black" fill="white" x="2" y="-3" width="377" 

height="192'y> 

</g> 

<g id="hover" display="none"> 

<rect stroke?="#EEEEEE" stroke-width="2" fill="white" x="0" y="-5" 
width="380" height="195"/> 

<line stroke="black" xl= w l" yl="-4" x2="380" y2="-4"/> 

<line strokes-black" xl="r yl="-4 n x2="l" y2="1917> 

<rect stroke^'black" fill="wbite" x="2" y="-3" width="377" 
height="192"> </g> 

<g id="down" display="none"> 

<rect stroke="#EEEEEE" stroke-width="2" fill="white n x="0" y="-5" 
widfli^'380'* height="1957> 

<line stroke="black" xl=T yl="-4" x2="380" y2="-47> 

<line stroke="black" xl="l" yl="-4" x2="l" y2= l, 191 ,, /> 

<rect stroke="black" fill="white" x="2" y="-3" width="377" 

height="192'7> 

<line id="skinTextboxMultiLine_cursor" xl="3" yl="2" x2="3" 
y2="16" style="stroke:black"> 
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<animate attributeType="CSS B attributeName="opacity" 
values="0;0;0;0;0;0; 1 ; 1 ; 1 ; 1 ; 1 ; 1 " dui=" 1 s" repeatCount="indefinite"/> 

</line> 

</g> 

<g id="disabled" display="none"> 

<rect stroke="gray" filH'white" x="0" y="-5" width="380" height="195"/> 
</g> 

<clipPathid="skinTextboxMultiLine_textView"> 

<rectid="skinTextboxMultiLine_textArea" fill=" green" x="3"y="3" 
width="373" height="185"/> 

</clipPath> 

<text clip-path= n url(#skinTextboxMultiLine_textView)" 
id="skinTextboxMuItiLine_text" xml:space='*preserve" x="7" y="15" style="font- 
face:Arial;font-size:12;fili:black;stroke:none"x/text> 
<Jg> 

</svg> 

skinTextScroll_Defaultsvg 

<?xml version="1.0"?> 
<svg> 

<g id="skinTextboxScroll"> 

< u s e id = "TextBoxSkin" 
xlink:href="skinTextBox_Default.svg#skinTextboxMuItiLine' , x="0" y="0*7> 

<u se id="VertScrollSkin" 
xlil±:h^e^•skinSc^olBaT_Default.svg#skinScroIlBa^Small ,, x="0" y="0'7> 
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<use id = "HorizScrollSkin" 
xlink:href ; ="skinScrollBa^_Defa^llt.svg^skinSc^ollBarSmall ,, x="0" y="0"/> 

</g> 

<g id="label" style="font-family:Tahoma';stroke:none;font-size:12"> 
<text x="0" y="-6" fill="black"> </text> 

<dsvg:constraint scalelmmunity="trae" hAlign-'left" v Align- T)ottom'7> 

</g> 

</svg> 

skinTooltip.svg 

<?xml version="1.0"?> 
<svg> 

<g id="skinTooltip_annotation"> 

<path sty^'fill^FFFFOOjfill-opacityrOJjstroke^lF 1 Al 7;stroke-width:3" 

d="M0 96 198 0 -56 -96 106 96 202 0 0 167 -352 0 0 -167z7> 
<text x="10" y="150" style="font-size:16;ffll:black">tip<rtext> 

</g> 

<g id="skinTooltip_traditionar' pointer-events="none"> 
<rect x="0" y="0" width=" 1 50" height=" 15" 

style="fill:rgb(255,255,225);fill-opacity:0.9" stroke^lack" stroke-width=" 1 "/> 
<text x="5" y="12" style="font-size:12;fill:black">tip</text> 

</g> 

<g id- 'skmTooltipjspeciaP pointer-events="none"> 
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<rect x="0" y="0" width="150" height="15" 

style="fill:rgb(130, 1 30,130);fill-opacity:0.5" stroke="black" stroke-width=" 17> 
<textx="5" y="12" style='Tont-size:12;ffll:black*>tip<text> 

</g> 

5 </svg> 
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WHAT IS CLAIMED IS: 

1. A system for controlling user interface features of a web application, the system 
comprising: 

5 a collection of user interface control elements, each control element comprising: 

a name following a predetermined naming convention; 

common attributes for defining graphical features of the control element and 
for associating the control element with the internal state of the core control element; 

other attributes for defining attributes that affect the intrinsic behavior of the 

10 control; and 

a skin template reference attribute for referencing a skin template; 

a collection of skin templates comprising extensible markup language based markup 
contained as children of a container element; 

a collection of control element scripts for performing actions associated with the 
1 5 control elements, each script associated with a control element; and 

an initialization function for directing the processing one or more control elements 
in a document object model. 

2> The system as claimed in claim 1, wherein the predetermined naming convention 
20 comprises having a constant prefix to the name of the element. 

3 . The system as claimed in claim 1 , wherein the skin template reference attribute comprises 
a reference to the location of a skin template file. 

25 4. The system as claimed in claim 1, wherein the control element is associated with an 
extensible markup language based element 
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5. The system as claimed in claim 4, wherein the control element is a parent of an extensible 
markup language based element. 

6. The system as claimed in claim 4, wherein the control element is a child of an extensible 
5 markup language based element. 

7. The system as claimed in claim 1 , wherein the initialization function contains instructions 
for traversing each node in a document object model and for searching and calling functions 
associated with control elements having names following the predetermined naming 

10 convention. 

8. The system as claimed in claim 1, further comprising: 

a collection of control attributes for adding to existing regular extensible markup 
language based elements in a document object model, the control attributes following the 
1 5 predetermined naming convention; and 

a collection of control attribute scripts for performing actions associated with the 
collection of control attributes, each script associated with a control attribute. 

9. The system as claimed in claim 8, wherein the initialization function contains instructions 
20 for traversing each node in the document object model and for searching and calling 

functions associated with control elements and control attributes having names following the 
predetermined naming convention. 

10. The system as claimed in claim 8, wherein the collection of control attribute scripts is 
25 stored in a memory location of a computer system. 
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1 1 . The system as claimed in claim 1 , wherein the collection of scripts is stored in a memory 
location of a computer system. 

12. The system as claimed in claim 1, wherein the collection of skin templates is stored in 
5 a memory location of a computer system. 

13. The system as claimed in claim 1, wherein the collection of control elements comprises 
a markup language. 

10 14. The system as claimed in claim 1, wherein the common attributes comprise state 
attributes for specifying the identification of a <state> child element of the control element. 

15. The system as claimed in claim 1, wherein the common attributes comprise one or more 
of: 

1 5 an identification attribute for referencing the control element; 

a label attribute for associating text control; 

an x attribute for specifying the x-coordinate of the left edge of the control element; 

a y attribute for specifying the y-coordinate of the top edge of the control element; 

a width attribute foT specifies the width of the control element; 

20 a height attribute for specifies the height of the control element; 

a preserve aspect ratio attribute for preserving the aspect ratio of the control element 
when either the width attribute or height attribute is known; 

a labelX attribute for specifying the x-coordinate of the left edge of the label, relative 
to the y attribute; 

25 a label Y attribute for specifying the y-coordinate of the bottom edge of the label, 

relative to the 'x' attribute; 
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a disabled attribute for specifying whether the control element is disabled and cannot 
be used; 

a state hover attribute for specifying the identification of a <state> child element of 
the control element, the state hover attribute used to override the appearance of a hover state 
5 as defined in a skin of the control element; 

a state focus attribute for specifying the identification of a<state> child element of the 
control element, the state focus attribute used to override the appearance of a focus state as 
defined in a skin of the control element; 

a state up attribute for specifying the identification of a <state> child element of the 
10 control element, the state up attribute used to override the appearance of an up state as 
defined in a skin of the control element; 

a state down attribute for specifying the identification of a <state> child element of 
the control element, the state down attribute used to override the appearance of a down state 
as defined in a skin of the control element; 

15 a state hit attribute for specifying the identification of a <state> child element of the 

control element, the state hit attribute used to override the appearance of a hit state as defined 
in a skin of the control element; 

a state disabled up attribute for specifying the identification of a <state> child element 
of the control element, the state disabled up attribute used to override the appearance of a 
20 disabled up state as defined in the skin of the control element; and 

a state disabled down attribute for specifying the identification of a <state> child 
element of the control element, the state disabled down attribute used to override the 
appearance of a disabled down state as defined in a skin of the control element 



25 16. The system as claimed in claim 15, wherein the set of control elements comprises a 
dsvg;button control element for defining a control that is clicked to trigger an action, the 
dsvg:button control element comprising: 

a namespace following the predetermined naming convention; 
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the common attributes; 
other attributes comprising: 

a toggle attribute for specifying whether the button is a toggle or a sticky 

button; 

5 a group attribute for specifying the name of a group to which the button 

control element belongs; and 

a checked attribute for specifying whether the button control element is 
down/checked or up/unchecked; 

a skin template reference attribute for specifying the location of a control element skin 
1 0 template, the skin template reference settable to a uniform resource index; and 

a customizable skin template comprising scalable vector graphics markup contained 
as children of a container element. 

17. The system as claimed in claim 15, wherein the set of control elements comprises a 
1 5 dsvgrcomboBox control element for defining a control that is clicked to trigger an action, the 
dsvgxomboBox control element comprising: 

a namespace following the predetermined naming convention; 

the common attributes; 

other attributes comprising: 

20 a dropdown attribute for specifying whether the comboBox control element 

has a dropdown list; 

an editable attribute for specifying whether the comboBox control element is 

editable; 

a value attribute for specifying the value of the label attribute of currently 

25 selected item; 

a name attribute for specifying the value of a name attribute of a currently 
selected item; and 
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a selected identification attribute for specifying the value of the identification 
attribute of a currently selected item; 

a skin template reference attribute for specifying the location of a control element skin 
template, the skin template reference settable to a uniform resource index; and 

5 a customizable skin template comprising scalable vector graphics markup contained 

as children of a container element. 

18. The system as claimed in claim 15, wherein the set of control elements comprises a 
dsvg:listBox control element for defining a control that is clicked to trigger an action, the 
1 0 dsvgrlistBox control element comprising: 

a namespace following the predetermined naming convention; 

the common attributes; 

other attributes comprising: 

a multi select attribute for specifying whether more than one item can be 

15 selected; 

an editable attribute for specifying whether the listBox control element is 

editable; 

a value attribute for specifying the value of the label attribute of currently 

selected item; 

20 a name attribute for specifying the value of a name attribute of a currently 

selected item; and 

a selected identification attribute for specifying the value of the identification 
attribute of a currently selected item; 

a skin template reference attribute for specifying the location of a control element skin 
25 template, the skin template reference settable to a uniform resource index; 

a customizable skin template comprising scalable vector graphics markup contained 
as children of a container element. 
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19. The system as claimed in claim 15, wherein the set of control elements comprises a 
dsvg:listView control element for defining a control that is clicked to trigger an action, the 
dsvg:listView control element comprising: 

a namespace following the predetermined naming convention; 

5 the common attributes; 

other attributes comprising: 

a multi select attribute for specifying whether more than one item can be 

selected; 

an editable attribute for specifying whether the comboBox control element is 

10 editable; 

a display attribute for specifying a semicolon-delimited list of the names of 
the attributes in all of the <item> children of a control element; 

an anything attribute for specifying an attribute name in which to store data; 

and 

15 a selected identification attribute for specifying the value of the identification 

attribute of a currently selected item; 

a skin template reference attribute for specifying the location of a control element skin 
template, the skin template reference settable to a uniform resource index; 

a customizable skin template comprising scalable vector graphics markup contained 
20 as children of a container element. 

20. The system as claimed in claim 15, wherein the set of control elements comprises a 
dsvg:contextMenu control element for defining a control that is clicked to trigger an action, 
the dsvgxontextMenu control element comprising: 

25 a namespace following the predetermined naming convention; 

the common attributes; 

other attributes comprising: 
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an event source attribute for specifying the identification of an element that 
triggered the contextMenu control element to appear; 

a value attribute for specifying the value of the label attribute of currently 

selected item; 

a name attribute for specifying the value of a name attribute of a currently 
selected item; and 

a selected identification attribute for specifying the value of the identification 
attribute of a currently selected item; 

a skin template reference attribute for specifying the location of a control element skin 
template, the skin template reference settable to a uniform resource index; 

a customizable skin template comprising scalable vector graphics markup contained 
as children of a container element. 

21. The system as claimed in claim 15, wherein the set of control elements comprises a 
dsvg:item control element for defining a control that is clicked to trigger an action, the 
dsvg:item control element comprising: 

a namespace following the predetermined naming convention; 

the common attributes; 

other attributes comprising: 

an access key attribute for specifying a shortcut key which, when pressed, 
selects this item; and 

an anything attribute for specifying an attribute name in which to store data; 

a skin template reference attribute for specifying the location of a control element skin 
template, the skin template reference settable to a uniform resource index; 

a customizable skin template comprising scalable vector graphics markup contained 
as children of a container element. 
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22. The system as claimed in claim 15, wherein the set of control elements comprises a 
dsvgitextbox control element for defining a control that is clicked to trigger an action, the 
dsvg:textbox control element comprising: 

a namespace following the predetermined naming convention; 

the common attributes; 

other attributes comprising: 

a value attribute for specifies default text within the textbox control element; 

a num lines attribute for specifying a number of lines allowed in the textbox 
control element; 

a max length attribute for specifying a maximum number of characters 
allowed in the textbox control element; 

a wrap attribute for specifying whether to auto-wrap text; 

a read only attribute for specifying if the textbox control element is non- 
editable; 

a secret attribute for specifies whether text is secret; 

a data type attribute for specifying a type of data that allowed to be entered; 

a mask attribute for specifies a pattern that allows extra characters to be 
inserted into data as it is entered and for only allowing specific characters in specific 
locations; and 

a case attribute for specifying the case of data entered into the textbox control 

element; 

a skin template reference attribute for specifying the location of a control element skin 
template, the skin template reference settable to a uniform resource index; 

a customizable skin template comprising scalable vector graphics markup contained 
as children of a container element. 
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23. The system as claimed in claim 15, wherein the set of control elements comprises a 
dsvgrslider control element for defining a control that is clicked to trigger an action, the 
dsvg: slider control element comprising: 

a namespace following the predetermined naming convention; 

5 the common attributes; 

other attributes comprising: 

a min attribute for specifying a minimum value of the slider control element; 

a max attribute for specifying a maximum value of the slider control element; 

a min position attribute for specifies a minimum allowed value of a thumb; 

1 0 a max position attribute for specifies a maximum allowed value of a thumb; 

a value attribute for specifying an initial value of the slider control element; 

an increment attribute for specifying allowed values that the slider control 
element can create; 

a page increment attribute for specifying an amount that a thumb moves; 

15 an orientation attribute for specifying a rotation angle of the slider control 

attribute; 

a ticks major attribute for specifying an interval at which major tick marks are 

displayed; and 

a ticks minor attribute for specifying an interval at which minor tick marks are 

20 displayed; 

a skin template reference attribute for specifying the location of a control element skin 
template, the skin template reference settable to a uniform resource index; 

a customizable skin template comprising scalable vector graphics markup contained 
as children of a container element. 

25 
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24. The system as claimed in claim 15, wherein the set of control elements comprises a 
dsvgrscrollbar control element for defining a control that is clicked to trigger an action, the 
dsvg:scrollbar control element comprising: 

a namespace following the predetermined naming convention; 
5 the common attributes; 

other attributes comprising abars attribute for specifies the appearance of a horizontal 
scrollbar or a vertical scrollbar; 

a skin template reference attribute for specifying the location of a control element skin 
template, the skin template reference settable to a uniform resource index; 

1 0 a customizable skin template comprising scalable vector graphics markup contained 

as children of a container element. 

25. The system as claimed in claim 15, wherein the set of control elements comprises a 
dsvg:spin control element for defining a control that is clicked to trigger an action, the 

1 5 dsyg:spin control element comprising: 

a namespace following the predetermined naming convention; 
the common attributes; 
other attributes comprising: 

a min attribute for specifying a minimum value of the spin control element; 
20 a max attribute for specifying a maximum value of the spin control element; 

a value attribute for specifying an initial value of the spin control element; and 

an increment attribute for specifying allowed values that the spin control 
element can create; 

a skin template reference attribute for specifying the location of a control element skin 
25 template, the skin template reference settable to a uniform resource index; 

a customizable skin template comprising scalable vector graphics markup contained 
as children of a container element. 
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26. A system for controlling user interface features of a web application, the system 
comprising: 

a collection of control element scripts for performing actions associated with the 
control elements, each script associated with a control element; and 

5 an initialization function for directing the processing of one or more control elements 

in a document object model. 

27. The system as claimed in claim 26, further comprising a collection of skin templates 
comprising extensible markup language based markup contained as children of a container 

10 element. 

28. A method of controlling user interface features of a web application, the method 
comprising the steps of: 

searching for a designated user interface control element in a document object model; 

15 and 

calling a script associated with the designated control element. 

29. The method as claimed in claim 28, wherein the step of searching includes the steps of: 

traversing each node in the document object model; and 

20 determining whether an element has a name which follows a designated naming 

convention. 

30. The method as claimed in claim 29, wherein the designated naming convention 
comprises appending a prefix to the name of the designated element. 

25 

3 1 . The method as claimed in claim 28, wherein the step of calling a script includes the steps 

of: 
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dynamically generating a function name associated with the designated element; 

passing an object associated with the designated element as a parameter of the 
generated function; 

retrieving the attributes of the object; and 

performing a function stored in memory having the generated function name. 

32. The method as claimed in claim 3 1 , wherein the step of dynamically generating includes 
the steps of: 

determining if the name of the designated element contains a designated prefix; 

generating a function name comprising of the name of the designated element; 

assigning an object associated with the designated element as the parameter of the 
function; and 

assigning predetermined instructions of the designated element as steps for the 
function to perform. 

33. The method as claimed in claim 28, wherein the step of calling a script includes the steps 
of: 

determining which script in a collection of scripts is associated with the designated 
element; and 

calling the script. 

34. The method as claimed in claim 28, further comprising the steps of: 

searching for a designated attribute in an element in a document object model; and 
calling a script associated with the designated attribute. 
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35. The method as claimed in claim 34, wherein the step of searching for a designated 
attribute comprises the steps of: 

searching attributes of an element in a document object model; 

determining whether an element attribute has a name which follows a designated 
5 naming convention. 

36. The method as claimed in claim 35, wherein the naming convention comprises 
appending a prefix to the name of the designated attribute. 

10 37. The method as claimed in claim 34, wherein the step of calling a script includes the steps 
of: 

determining if the name of the designated attribute contains a designated prefix; 

generating a function name comprising of the name of the designated attribute; 

assigning an object associated with the designated attribute as the parameter of the 
15 function name ; and 

assigning predetermined instructions of the designated attribute as steps for a function 
having the function name to perform. 

38. The method as claimed in claim 34, wherein the step of calling a script includes the steps 
20 of: 

dynamically generating a function name associated with the designated attribute; 

passing an object associated with the designated attribute as a parameter of the 
generated function name; 

receiving the attributes of the object; and 

25 performing a function stored in memory having the generated function name. 
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39. The method as claimed in claim 38, wherein the step of dynamically generating 
comprises the steps of: 

determining if the name of the designated attribute contains a designated prefix; 

generating a function name comprising of the name of the designated attribute; 

5 assigning an object associated with the designated attribute as the parameter of the 

function; and 

assigni ng predetermined instructions of the designated attribute as steps for the 
function to perform. 

1 0 40. The method as claimed in claim 34, wherein the step of calling a script includes the steps 
of: 

determining which script in a collection of scripts is associated with the designated 
attribute; and 

calling the script. 

15 

41. A method of controlling user interface features of a web application, the method 
comprising the steps of: 

adding a behavior element as a child of a user interface control element; 

receiving an event which is equal to an event attribute setting in the behavior element; 

20 and 

calling a script associated with the behavior element 

42. A method of creating a customizable user interface control element having expected 
behaviours, the method comprising the steps of: 

25 categorising user interface controls into fundamental core controls; 

determining variations of a core controls; 
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determining common attributes of the core control; 

detenxiining fundamental states for the core control; 

determining how to allow for absolute positioning of objects the core control; 

determining how to allow for absolute customization of appearance of the core 
5 control; 

assigning a reference link to the core control; 

determining templates for skins to allow for the absolute customization of appearance 
of the core control; 

determining how to associate behaviors to the core control; and 

1 0 creating a core control element. 

43. The method as claimed in claim 42, wherein a plurality of user interface control elements 
are created. 

15 44. The method as claimed in claim 42, wherein the step of categorising includes the steps 
of: 

organising low level controls into groups of similar controls; and 
designating core control names to the groups. 

20 45. The method as claimed in claim 42, wherein the step of determining includes the steps 
of: 

analysing variations of the core controls; and 

compiling a list of attributes needed to perform the variations. 

25 46. The method as claimed in claim 42, wherein the step of creating includes the steps of: 
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assigning a name to the core control element pursuant to a predetermined naming 
convention; and 

assigning the common attributes to the core control element. 

5 47. Computer readable media storing the instructions and/or statements for use in the 
execution in a computer of a method of controlling user interface features of a web 
application, the method comprising steps of: 

searching for a designated user interface control element in a document object model; 

and 

10 calling a script associated with the designated control element. 



48. Electronic signals for use in the execution in a computer of a method of controlling user 
interface features of a web application, the method comprising steps of: 

searching for a designated user interface control element in a document object model; 

15 and 

calling a script associated with the designated control element. 



49. A computer program product for use in the execution in a computer of a method for 
controlling user interface features of a web application, the computer program product 
20 comprising: 

a collection of control element scripts for performing actions associated with the 
control elements, each script associated with a control element; and 

an initialization function for directing the processing of one or more control elements 
in a document object model. 

25 



-200- 



CA 02414378 2002-12-09 



Web Display Environment 





Browser 


1 1 






Java S cript 




V ie w er 




13 








DOM 



15 



F ig u re 1 
PR IO R ART 



10 



DOM Manipulation System 



Initialization File 



U I Co ntro I E lem ents 



B eh avior E lem ent 1 
23 



Name 



24 



Common 
A ttributes 



25 



O the r Attributes 



S kin Tern plate 
R efe rence 



22 



IS! 



21 



Collection of Scripts 



Script 1 



28 



Collection of S kin 
Tern plates 



Skin Tern plate 1 

"^7 



27 



F ig u re 2 



Cowling lafieur Hendersoa LLP 



CA 02414378 2002-12-09 




Figure 3 



Cowling Lafieur Henderson LLP 





Cowling Lafieur Henderson 



CA 02414378 2002-12-09 




Gwtlmg Lafleur Henderson LLf 



CA 02414378 2002-12-09 




Cowling Laiicur Henderson LUP 



201- 



202 



CA 02414378 2002-12-09 



^200 



Categorize low level Ul controls into abstractions or core 
control groupings 



Determine common attributes 
of a core control grouping 



203 



204- 



Create skin template for core control grouping 



Create a Ul control element having common attributes, 
other attributes and 
create skin template of the core control grouping 




Yes 



Figure 8 



Cowling Lafieur Henderson LLP 



CA 02414378 2002-12-09 



210 



Organize low level Ul controls into groupings of similar core controls 



211 



Designate Ul control names to the groupings 



212 



I 



Analyze variations of a grouping to determine the common attributes 

of the grouping 



213 



i 



Compile a list of common attributes needed to perform the 

variations 



214 



Determine fundamental states of the grouping 



215 



I 



Determine how to allow for absolute positioning 



216 



Determin how to allow for absolute customization of 
appearance 



217 



Determine other attributes needed for grouping 



218 



I 



Assign a name to a core control element 



219 



I 



Assign common attributes to core control element 



220 



Assign other attributes to core control element 



221 



Assign skin template reference to core control element 



222 




Yes 



Figure 9 
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